안녕하세요! 여러분의 칙칙한 블로그에 화사한 생명력을 불어넣어 줄 에디터입니다. 혹시 블로그 하단에 텍스트로만 '인스타그램'이라고 적어두셨나요? 앗, 그러시면 곤란합니다! 요즘 방문자들은 아이콘 하나만 보고도 그 블로그의 전문성을 판단하거든요.
오늘은 구글 블로거(Blogger) 유저분들의 가장 큰 고민인 '소셜 아이콘 예쁘게 넣기'를 폰트 어썸(Font Awesome)으로 해결해 드릴게요. 사실 저도 예전에 아이콘이 안 나와서 모니터 붙잡고 울 뻔했는데, 알고 보니 정말 간단하더라고요!
- 폰트 어썸은 이미지보다 로딩이 빠르고 깨지지 않는 '마법 같은' 벡터 아이콘입니다.
- Blogger 테마 HTML에 코드 한 줄만 넣으면 500개 이상의 아이콘이 내 것!
- CSS를 한 꼬집 섞어주면 색상과 크기까지 내 마음대로 커스텀할 수 있어요.
왜 굳이 '폰트 어썸'인가요?
이유는 명확합니다. 가볍고, 선명하고, 예쁘기 때문이죠. 일반 이미지를 쓰면 모바일에서 깨지거나 페이지 로딩이 느려지기 일쑤인데, 폰트 어썸은 폰트처럼 취급되어 어떤 화면에서도 칼처럼 날카로운 해상도를 보여줍니다. SNS 연결은 이제 선택이 아닌 필수잖아요? 검색 유입만 기다리는 건 너무 속 터지니까요!
Blogger에 아이콘 심는 초간단 3단계
Step 1. 연결 고리 만들기 (CDN 삽입)
Blogger 관리자 페이지에서 [테마] > [HTML 편집]으로 들어가세요. Ctrl + F를 눌러 <head> 태그를 찾은 뒤, 바로 그 밑에 아래 코드를 복사해서 붙여넣으세요.
이거 안 넣으면 아이콘이 그냥 빈 네모칸으로 나오니까 주의하세요! (제가 예전에 이거 빼먹고 한 시간 동안 고생했답니다...)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />Step 2. 원하는 위치에 배치하기
이제 [레이아웃]에서 [가젯 추가]를 누르고 'HTML/JavaScript'를 선택하세요. 그리고 아래 코드를 넣으면 끝! 링크 주소는 본인의 SNS 주소로 바꾸는 것, 잊지 마세요!
<div id="sns-icons"> <a href="내 페북 주소" target="_blank"><i class="fa fa-facebook"></i></a> <a href="내 인스타 주소" target="_blank"><i class="fa fa-instagram"></i></a> <a href="내 유튜브 주소" target="_blank"><i class="fa fa-youtube"></i></a> </div>
추가 예시
<div id="fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow">
<i class="fa fa-facebook"></i>
</a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow">
<i class="fa fa-google-plus"></i>
</a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow">
<i class="fa fa-twitter"></i>
</a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow">
<i class="fa fa-pinterest"></i>
</a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow">
<i class="fa fa-instagram"></i>
</a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow">
<i class="fa fa-heart"></i>
</a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow">
<i class="fa fa-tumblr"></i>
</a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow">
<i class="fa fa-rss"></i>
</a>
</div>
자주 묻는 질문 (FAQ)
❓ 아이콘이 네모 박스로만 나와요!
💡 십중팔구 Step 1의 링크 코드를 제대로 안 넣으신 겁니다. <head> 바로 아래에 다시 한 번 확인해 보세요!
❓ 트위터 X 아이콘으로 바꾸고 싶어요.
💡 폰트 어썸 4.7 버전 기준으로는 fa-twitter를 사용하면 됩니다. 최신 로고를 원하신다면 폰트 어썸 6 버전을 써야 하지만, 입문자분들께는 4.7 버전이 가장 안정적이고 쉽습니다!
fa-xxx같은 아이콘 사용이 궁금하다면? https://fontawesome.com/에서 찾으시면 됩니다. 혹은 GPT에게 그냥 물어보세요.
짜잔! 생각보다 너무 쉽죠? 이제 여러분의 블로그도 SNS와 연결되어 훨씬 더 전문적인 느낌을 주게 될 거예요. 혹시 따라 하다가 막히는 부분이 있다면 절대 혼자 끙끙 앓지 마시고 댓글 남겨주세요.
제가 아는 선에서 최대한 도와드릴게요! 여러분의 즐거운 블로깅을 응원합니다. 안녕!
[알림: 이 가이드는 정보 공유를 위해 작성되었어요. 블로거 테마를 수정하기 전에는 만약을 대비해 꼭 백업 파일을 다운로드해 두세요! 혹시나 코드가 꼬여도 제가 다 고쳐드릴 순 없으니까요. 하하!]
