2014. 3. 27. 23:18ㆍIT/Tistory Tips
Font Awesome 바로가기
Font Awesome은 글자 대신 아이콘을 넣은 아이콘 폰트다. 아이콘 폰트라는 말이 낯설지도 모르겠지만, 일반 글꼴과 다른 점은 글자 대신 아이콘이 들어있다는 것뿐이다. 예전 유행했던 딩뱃(Dingbat) 폰트와 비슷하다. 예를 들어 'a'라는 글자를 입력했을 때 보통의 글꼴에선 'a'가 표시되지만, 아이콘 폰트에선 특정 아이콘이 표시된다고 생각하면 된다. Font Awesome은 Desktop에서도 사용할 수 있지만, 특히 CSS @font-face(웹폰트)로 블로그 등에서 사용할 때 활용도가 더 높다. 369개나 되는 아이콘을 무료로 사용할 수 있으며 svg 등의 벡터 이미지처럼 사이즈를 키우거나 줄였을 때도 아이콘 품질이 바뀌지 않아서 크기에 구애받지 않고 사용할 수 있기 때문이다. 또 색상, 크기, 그림자 등의 스타일을 이미지 편집이 아닌 CSS에 몇 글자 추가하는 것만으로 변경할 수 있다. 그럼 티스토리 블로그에 Font Awesome을 설치하고 사용하는 방법을 단계별로 살펴보자.
1. 티스토리에 Font Awesome 설치하기
티스토리에서 Font Awesome을 사용하려면 먼저 설치 과정을 거쳐야 한다. 티스토리 블로그에서 사용하는 skin.html 파일에서 Font Awesome 폰트 파일 및 CSS를 불러오도록 설정하는 과정이다. 설치방법은 크게 두 가지인데 개인적으로는 간단한 첫 번째 방법을 추천한다.
1) Bootstrap CDN 사용하기
Bootstrap CDN은 Font Awesome을 설치하는 가장 간단한 방법이다. [티스토리 관리] - [HTML/CSS] - [skin.html] 파일로 이동한 다음 <head> </head> 사이에 아래 코드를 붙여넣고 [저장]을 눌러 스킨을 저장하면 끝난다.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />2) 티스토리에 직접 파일 업로드하기
두 번째 방법은 기존 웹폰트를 사용할 때처럼 티스토리에 Font Awesome 웹폰트 파일 및 CSS 파일을 업로드해서 사용하는 방법이다. 먼저 아래 링크에서 파일을 내려받는다.
내려받은 파일의 압축을 풀고 CSS 폴더의 font-awesome.min.css 파일을 메모장 등 텍스트 편집 프로그램으로 연다. 파일 첫 부분에서 얼마 지나지 않아 아래 /* 원본 내용 */과 같은 부분을 찾을 수 있을 것이다.
/* 원본 내용 */
@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.0.3');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
/* 수정된 내용 */
@font-face{font-family:'FontAwesome';src:url('./fontawesome-webfont.eot?v=4.0.3');src:url('./fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('./fontawesome-webfont.woff?v=4.0.3') format('woff');
src:url() 부분이 바로 웹폰트로 사용할 파일 경로를 지정하는 부분이다. 원래 CSS에는 fonts라는 폴더 안에 웹폰트 파일이 있을 때의 경로가 지정되어 있는데, 티스토리는 images란 폴더 안에 CSS와 웹폰트 파일이 함께 저장되므로 이 부분을 티스토리 블로그에 맞게 /* 수정된 내용 */ 처럼 수정하고 파일을 저장한다. (eot와 woff만 사용하는 이유에 대해선 블로그에 유용한 CSS 5 - 티스토리 블로그에 웹폰트 적용하기 (3)를 참고한다.) 이제 [티스토리 관리] - [HTML/CSS 편집] - [파일업로드]에서 '추가'를 누르고 방금 수정한 font-awesome.min.css 파일과 fonts 폴더의 fontawesome-webfont.eot, fontawesome-webfont.woff 파일을 티스토리로 업로드한다.
<link href="./images/font-awesome.css" rel="stylesheet" type="text/css" />
마지막으로 [HTML/CSS]탭의 [skin.html]로 이동해서 <head> </head> 사이에 위의 코드(link 요소)를 붙여넣고 [저장]을 눌러 스킨을 저장하면 Font Awesome 사용을 위한 준비가 모두 끝난다.
2. Font Awesome 사용하기 - 기본편
Font Awesome은 버전에 따라 조금씩 사용방식이 다른데 여기서는 4.0.3 버전을 기준으로 살펴보자. Font Awesome을 설치한 티스토리 블로그의 글쓰기 화면 [HTML] 모드에서 아래의 코드를 추가해본다.
<i class="fa fa-list"></i>위의 예처럼 'fa-list' 라는 이름에 해당하는 Font Awesome 아이콘을 확인할 수 있을 것이다. Font Awesome의 기본 문법은 <i> 요소에 Font Awesome에서 미리 지정해둔 class를 입력하는 방식이다. 일단 <i 를 먼저 입력하고 class에 'fa'를 적고 띄어쓰기 한 칸 뒤에 'fa-아이콘 명칭'을 입력하면 해당 아이콘이 표시된다. HTML이나 CSS를 몰라도 <i class="fa fa-아이콘 명칭"></i>만 기억하면 누구나 사용할 수 있다. 전체 아이콘 종류는 Font Awesome Cheatsheet에서 확인할 수 있다.
<Font Awesome Cheatsheet>
3. 기타 설정 - 응용편
앞서 살펴본 것처럼 Font Awesome은 <i> 요소에 font-awesome.min.css 파일에서 미리 설정해둔 class를 지정하는 방식으로 사용한다. 2번에서 얘기한 방법으로 아이콘을 적용하고 CSS를 조정하면 색, 크기 등 다양한 방식으로 아이콘을 표현할 수 있다. 그러나 CSS를 전혀 모르는 사용자라면, 또는 CSS를 잘 알더라도 매번 아이콘 크기를 바꿀 때마다 style="font-size:2em"과 같은 인라인 스타일을 지정하려면 보통 일이 아니다. 그런 불편해소를 위해 Font Awesome은 기본적으로 몇 가지 옵션을 제공한다. 적용법은 앞에서와 마찬가지로 미리 설정된 class를 사용하면 된다. 알아두면 유용한 Font Awesome의 기타 옵션을 살펴보자.
1) 아이콘 크기 변경
<i class="fa fa-briefcase"></i>
<i class="fa fa-briefcase fa-lg"></i>
<i class="fa fa-briefcase fa-2x"></i>
<i class="fa fa-briefcase fa-3x"></i>
<i class="fa fa-briefcase fa-4x"></i>
<i class="fa fa-briefcase fa-5x"></i>
첫 번째는 아이콘 크기를 조정하는 것이다. 위의 예에서 붉은색으로 표시된 것처럼 fa-lg, fa-2x ~ 5x라는 class를 아이콘 명칭 뒤에 입력한다. fa-lg는 기본 크기의 1.33배이고 나머지는 2 ~ 5배다.
2) 여백 있는 아이콘
<i class="fa fa-briefcase fa-3x" style="border:1px solid #fff"></i>
<i class="fa fa-briefcase fa-3x fa-fw" style="border:1px solid #fff"></i>
fa-fw는 좌우여백을 설정하는 class다. 위 코드에서 흰 테두리 안쪽이 Font Awesome 아이콘 영역인데, fa-fw를 사용한 쪽에서만 좌우여백을 확인할 수 있다. 아이콘과 글을 함께 사용하는 목록에 사용하면 깔끔한 느낌이라 내비게이션 메뉴 등을 만들 때 좋다.
3) 아이콘을 사용한 리스트 작성
- 이런 목록 아이콘은
- 기본 목록 아이콘을
- 대신하는데 손쉽게
- 사용할 수 있습니다.
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>이런 목록 아이콘은</li>
<li><i class="fa-li fa fa-check-square"></i>기본 목록 아이콘을</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>대신하는데 손쉽게</li>
<li><i class="fa-li fa fa-square"></i>사용할 수 있습니다.</li>
</ul>
목록을 작성하는 ul, li 요소에 fa-ul, fa-li라는 class를 추가하면 손쉽게 기본 목록 아이콘을 대체할 수 있다. 실제 사용은 위의 예를 참고한다.
4) 방향 바꾸기 및 회전
<i class="fa fa-spinner fa-spin"></i> 회전
<i class="fa fa-shield"></i> 보통 아이콘
<i class="fa fa-shield fa-rotate-90"></i> 시계방향 90도 돌리기
<i class="fa fa-shield fa-rotate-270"></i> 시계방향 270도 돌리기
<i class="fa fa-shield fa-flip-horizontal"></i> 좌우 뒤집기
<i class="fa fa-shield fa-flip-vertical"></i>상하 뒤집기
회전이나 방향 바꾸기 역시 간단히 적용된다. 아이콘이 계속 돌아가게 하려면 fa-spin, 시계방향으로 돌리거나 상하/좌우로 뒤집으려면 fa-rotate-각도, fa-flip-horizontal, fa-flip-vertical을 class에 추가한다. 단, fa-spin은 CSS3의 기능이라서 인터넷 익스플로러 9버전 이하에는 적용되지 않는다.
5) 아이콘 겹치기
fa-twitter + fa-square-o
fa-flag + fa-circle
fa-terminal + fa-square
fa-ban + fa-camera
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter + fa-square-o<br>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag + fa-circle<br>
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal + fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x" style="color:#b94a48"></i>
</span>
fa-ban + fa-camera
아이콘을 겹쳐서 사용할 땐 먼저 부모 요소로 span을 쓰고 class에 fa-stack을 입력한다. 그다음 겹쳐 사용할 i 요소 두 개를 부모 요소 안에 넣고 테두리가 될 아이콘(크게 외곽에 표시될 아이콘)에 fa-stack-2x를, 내부에 들어갈 아이콘에 fa-stack-1x를 사용한다. fa-inverse는 아이콘 색을 흰색으로 바꿔준다. 위의 예에서처럼 부모 요소에 fa-lg, fa-2x 등 크기를 조정하는 class를 사용하면 겹친 아이콘 전체 크기가 커진다.
그 외 옵션이나 상세한 사용 예시는 Font Awesome Examples를 참고한다.
Font Awesome과 비슷한 아이콘 폰트는 여러 가지가 있지만, 무료이면서 종류가 다양하고 품질도 좋은 것을 찾기는 쉽지 않다. Font Awesome의 가장 큰 장점은 블로그에 한번 설치해두면 어디든 활용할 수 있다는 점이다. 단, 너무 많이 사용하면 Font Awesome을 적용한 다른 블로그와 비슷비슷한 느낌이 날 수 있으니 주의한다.