티스토리에서 Font Awesome 사용하기(글리프 아이콘)

블로그뿐만 아니라 웹사이트를 보기 좋게, 또는 편리하게 꾸미는 데 가장 중요한 것 중 하나가 아이콘이다. 예전에는 웹상에서 아이콘을 쓰려면 적당한 이미지 파일을 만들어 사용해야 했다. 일일이 그림을 만들고, 그 이미지를 웹상에 업로드해 일정한 경로를 만들고, 웹페이지에 그것을 사용하려면 img 태그를 써서 일일이 불러와야 했다. 한두 개면 괜찮겠지만 하나의 웹사이트에 사용되는 아이콘이 어디 한두 개인가. 그래서 사람들은 '★, ♬' 같은 특수 문자를 쓰기도 했다. 보다 간편하게 아이콘을 표현하고 싶었기 때문이다. 요즘에는 글리프 아이콘(Glyph Icon)을 사용한 다양한 표현이 가능해졌다.

글리프 아이콘(Glyph Icon)이란?

글리프 아이콘은 일종의 아이콘 서체로, 누군가가 미리 만들어 놓은 아이콘을 특정 코드로 불러와 웹페이지에서 출력할 수 있다. 본래 'glyph'라는 말 자체가 글자 하나의 모양에 대한 기본 단위를 뜻한다는 점을 상기하면 이해하기 쉽다. 대표적이고도 퀄리티가 좋은 글리프 아이콘 세트들은 아래 주소에서 살펴볼 수 있다.

http://wpalkane.com/design/glyph-icon-sets/

 

글리프 아이콘 중 비교적 많이 쓰이는 것은 글리피콘즈(GLYPHICONS)와 폰트 어썸(Font Awesome)인 듯하다. 둘 다 아이콘 수에서부터 압도적이고 디자인의 품질이 좋다. 이 중 Font Awesome을 티스토리 블로그에 설치하는 방법을 소개한다. 무료인 데다 크기 조절, 회전, 색상 변경, 여백 지정 등의 다양한 응용이 가능해서 매우 유용하다.

Font Awesome 4.3.0 설치하기

티스토리 블로그에서 Font Awesome을 사용하려면 먼저 스킨에 간단한 코드를 추가해 설치해야 한다. 다른 방법도 있지만 이 편이 훨씬 간편하다.
'티스토리 관리'로 들어가 'HTML/CSS 편집' - 'skin.html' 파일에서 <header>와 </header> 사이에 아래 코드를 붙여넣고 저장하기만 하면 끝이다.

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Font Awesome 4.3.0 기본 사용 방법 : 코드 넣는 법

'티스토리 관리'로 들어가 'HTML/CSS 편집' - 'skin.html' 파일에서 아이콘을 넣고 싶은 위치에 다음 코드를 추가한다. 이 코드는 'fa-bank'라는 아이콘을 삽입하는 소스이다. 

<i class="fa fa-bank"></i>

여기서 'fa-bank' 대신 다른 이름을 넣으면 그 이름에 해당하는 아이콘이 출력된다.

<i class="fa fa-film"></i>
<i class="fa fa-ambulance"></i>
<i class="fa fa-folder-open"></i>

간단하게 CSS Class 선택자만 바꾸면 519개의 아이콘을 무료로 사용할 수 있다. 아이콘 선택자 이름은 아래 홈페이지에서 찾아볼 수 있으며, 유니코드로도 입력할 수 있다.

http://fortawesome.github.io/Font-Awesome/cheatsheet/

---

자세한 코드와 응용 방법은 홈페이지의 예제 페이지에서 바로 복사할 수 있다. 홈페이지 자체가 Font Awesome을 이용해 만들어졌으니 자세히 살펴보면 응용 방안이 무궁무진하게 보인다.

예제 페이시 바로가기

 

Font Awesome를 CSS에 사용해 더 쉽게 블로그를 꾸미는 방법은 아래 포스트에 소개해 두었다.

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