여러 티스토리 블로그, 사이트를 방문해보면 폴더 모양, 집 모양, 연필 모양, 카드 모양 등등 여러 모양의 아이콘을 볼 수가 있습니다. 블로그를 운영하기 전까지는 아, 그냥 그렇구나 하고 지나갔던 부분이지만, 디자인을 바꾸고 연구하다보니 저 아이콘 어떻게 한 거지? 하고 의문이 들었습니다. ㅁ을 누르고 한자키를 눌러서 나오는 다양한 특수기호나 한컴오피스 한글에서 입력할 수 있는 특수기호들을 이용한 건가?라고도 생각해보았습니다. 하지만, 다른 사이트에서 사용하고 있는 아이콘과 똑같은 아이콘을 찾을 수 없었습니다.

이곳 저곳 알아보았지만, 답은 가까운 곳에 있었습니다. 바로, FastBoot 스킨에 이미 적용되어 있던 아이콘에서 힌트를 얻어 찾아냈습니다. 그리고 블로그의 모든 곳에 원하는 아이콘을 적재적소에 배치를 하였습니다.

제 티스토리 블로그 상단에 보이는 홈 아이콘과 

폴더 아이콘, 글 제목에 포함된 연필 아이콘의 모습입니다.

오른쪽 사이드바에도 여러 아이콘이 있습니다. 

돋보기 아이콘, 지구본 아이콘, 카드 모양 아이콘 등등 

정말 다양한 아이콘이 있다는 것을 확인할 수 있습니다.

지금부터 이 아이콘을 가져올 수 있는 곳을 알려드리겠습니다.

바로, Font Awesome이라는 사이트입니다.

아래 링크를 눌러 Font Awesome 사이트로 들어갑시다.

http://fontawesome.io/icons/

 Font Awesome 사이트에서 아이콘 검색하는 방법

FontAwesome 사이트의 Icons라는 탭 화면입니다.

여기서 스크롤을 조금만 더 내려봅시다.

아래에 수많은 아이콘과 아이콘의 이름이 나열되어 있습니다.

정말 너무 많은 아이콘이 있기 때문에

내가 원하는 아이콘을 언제쯤이면 찾을 수 있을지 걱정부터 앞섭니다. 

노가다를 해서 눈이 빨개질 정도로 찾아보면 

언젠가는 찾을 수야 있겠지만, 매우 비효율적입니다.

그런 문제를 해결하기 위해 사이트에서는 검색 기능을 제공하고 있습니다.

Search icons라고 되어 있는 곳을 한 번 클릭하고, 

영어로 원하는 아이콘의 이름을 적고 엔터를 누르면 쉽게 찾을 수 있습니다.

저는 연필 모양의 아이콘을 찾아보기 위해

Pencil을 입력해보았습니다.

Search for 'pencil'이라는 표시가 뜨면서 

pencil, pencil-square-o, pencil-square이라는 세 가지 검색 결과가 나왔습니다. 

이 중에서 가장 눈에 잘 들어오는 pencil을 눌러봅시다.

그러면 위와 같이 내가 원하는 아이콘의 코드가 나옵니다.

티스토리 블로그나 본인이 운영하는 사이트에 가서

위와 같이 코드를 넣어 수정해봅시다.

만약 이미 fa fa- 와 같은 형식의 코드가 있다면

뒤에 있는 부분, 화면에서는 옅은 분홍색으로 표시된 부분만

바꿔주시면 원하는 아이콘으로 변경하실 수 있습니다.

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!