티스토리나 웹사이트에 Font Awesome 글리프 아이콘 CSS 활용하기

지난 포스트에서 Font Awesome 4.3.0 설치와 사용법을 간단하게 소개했다.

Font Awesome 설치 및 사용법 포스트 바로가기

 

위에서 설명한 방법은 HTML 등에서 마크업하는, 그러니까 일일이 입력해 주는 방법이다. 실제로 Font Awesome 홈페이지에 있는 'Examples'에서는 거의 이 방법들만을 위주로 소개하고 있다. 그런데 글리피콘의 진가는 개별 마크업에서 오는 게 아니라, CSS에서 온다. 일정한 class 네임을 가진 요소들의 앞이나 뒤에 이 글리프 아이콘들을 넣도록 설정함으로서 웹사이트와 블로그의 디자인을 더욱 깔끔하고 예쁘게 꾸밀 수 있는 것. 그 기본적인 원리와 방법을 소개한다.

Font Awesome을 CSS에 활용해 보자

리스트 앞에 사용하기

Font Awesome 아이콘을 각종 리스트 앞에 사용하면 아주 유용하다. 대표적인 예가 아래의, 카테고리 리스트이다.

위 화면에 보면 카테고리 리스트마다 '' 아이콘이 붙어 있다. 이렇게 아이콘을 리스트 앞마다 붙이려면 아래와 같이 하면 된다.

리스트의 클래스 네임 찾기

먼저 스킨 html 파일에서 해당 리스트 부분의 클래스 네임을 찾는다. 치환자인 ‘[샵샵_category_list_샵샵]’로 찾을 수 있다. 나의 스킨에서 해당 부분은 아래와 같은데, 이 경우 클래스 네임은 ‘SidebarCategory’이다.

 <div class="SidebarCategory">
        <a href="/category"><h2>카테고리</h2></a>
        [샵샵_category_list_샵샵]
 </div> 

CSS 손보기

이제 CSS 파일에 가서 해당 클래스 네임을 찾는다.

 .SidebarCategory ul {list-style-type: none;} .SidebarCategory ul li {line-height:150%;} .SidebarCategory ul li a {color: #666666;} 

이 중 아이콘을 붙이고 싶은 리스트, 그러니까 ‘.SidebarCategory ul li a’(SidebarCategory라는 클래스 네임의 리스트 중 링크가 걸려 있는(a) 것)에 아이콘을 추가할 것이다. 방법은 이 뒤에 :before 태그를 넣는 것이다. 형식은 다음과 같다.

 .SidebarCategory ul {list-style-type: none;} .SidebarCategory ul li {line-height:150%;} .SidebarCategory ul li a {color: #666666;} .SidebarCategory ul li a:before {content: "\f101"; font-family: "FontAwesome"; margin-right: 0.3em;} 

위와 같이 ‘:before {content: "\f101"; font-family: "FontAwesome"; margin-right: 0.3em;}’ 속성을 가진 CSS를 한 줄 더 만들어 주는 것이다. 각각의 기능은 다음과 같다.

• :before : 해당 부분 앞에 {  } 속 내용을 덧붙임
• content: "\f101"; : 덧붙일 내용은 ‘\f101’임
• font-family: "FontAwesome"; : 글꼴은 ‘Font Awesome’임(Font Awesome을 설치해 두어야 이 부분을 인식한다.)
• margin-right:0.3em; : 아이콘 오른쪽에 0.3배만큼 여백을 둠(아이콘에 리스트가 너무 딱 달라붙으면 보기 싫으니까 적당한 여백을 설정하는 것이다.)

응용

‘\f101’ 대신 다른 아이콘을 넣어 붙일 수 있다. 지난 포스트에서 소개한 Font Awesome 홈페이지에 가면 엄청나게 많은 아이콘 중 원하는 것을 골라 쓸 수 있다.

아이콘 고르러 가기

 

이 중 원하는 아이콘을 찾아 클릭하면 다음과 같은 화면이 나오는데, 이 중 ‘Unicode’를 복사해서 앞에 ‘\’를 붙여 쓰면 된다.

 

앞이 아닌 뒤에 붙일 수도 있다. ‘before’ 대신 ‘after’를 붙이면 된다.

 .SidebarCategory ul {list-style-type: none;}
 .SidebarCategory ul li {line-height:150%;}
 .SidebarCategory ul li a {color: #666666;}
 .SidebarCategory ul li a:after {content: "\f101"; font-family: "FontAwesome"; margin-right: 0.3em;}

 

아이콘을 앞이 아닌 뒤에 붙이면 아래와 같은 모양으로 출력된다.

솜글 블로그 속 다양한 Font Awesome 아이콘들

내 블로그에는 엄청나게 많은 Font Awesome 아이콘이 쓰이고 있다. 대표적인 것들을 소개한다.
먼저, 검색 결과 리스트 및 카테고리 보기 리스트에는 '' 모양 아이콘을 사용했다.

 

글 내용 중 링크가 걸려 있는 부분에는 이런 아이콘을 붙였고,

 

글 하단에 출력되는 ‘카테고리의 다른 글’에는 아이콘을 세 가지나 사용했다. 현재 글에 이렇게 손가락 아이콘을 붙이면 인식하기에 훨씬 직관적이다.

 

방명록이나 댓글에는 이렇게 말풍선 모양 두 가지를 적용했다. 댓글에 또 댓글을 달면 두 개가 겹쳐진 모양이 달리도록 두 가지 모양을 따로 설정한 것이다.

 

본문 중 인용문에는 쌍따옴표 모양을 붙였다.

 

매 글마다 제목 아래에 출력되는 작성일과 카테고리 앞에도 각각 어울리는 아이콘을 붙여 인식하기 쉽게 했다.

---

Font Awesome을 설치해 두기만 하면 before, after 속성을 이용해 블로그나 웹사이트를 훨씬 직관적이고 깔끔하게 꾸밀 수 있다. 크기가 커져도 깨지지 않고 수많은 모양의 아이콘이 이미 구비되어 있기 때문에 코드만 잘 써 넣으면 편리하다.