티스토리 Font Awesome 사용하여 인포그래픽 폰트 아이콘 삽입하는 방법

블로그

티스토리 Font Awesome 사용하여 인포그래픽 폰트 아이콘 삽입하는 방법

 

환경: Internet Explorer 11

 

Font Awesome 은 텍스트 방식으로 만든 아이콘을 말합니다. 웹 브라우저에서는 Font Awesome 에서 제공하는 CSS 파일을 이용해서 아이콘을 적용할 수 있습니다.  그림이 아니며 아이콘이 모여 있는 글꼴이라고 생각하시면 됩니다. 이 폰트 파일을 받아서 컴퓨터에 설치해 두면 각종 문서에 적용이 가능합니다. 이것은 그림이 아니기 때문에 속도가 빠를 뿐만 아니라 모든 웹 브라우저에 호환이 됩니다. 그리고 폰트 아이콘은 벡터 방식이기 때문에 확대해도 깨지지 않는 장점이 있습니다. 

 

Font Awesome 사이트는 다음과 같습니다. 홈페이지에 접속해서 폰트를 다운받습니다. 파일은 컴퓨터에서 사용할 수 있는 ttf 뿐만 아니라 웹 브라우저에서 사용이 가능한 css 도 있습니다.

http://fontawesome.io 

티스토리 Font Awesome 사용하여 인포그래픽 폰트 아이콘 삽입하는 방법

 

¤ 티스토리 적용을 위한 소스 수정

 

 물론 Font Awesome 에서 CSS 를 다운받아 서버에 올려서 사용하지 않아도 됩니다. CDN 서버를 제공하고 있기 때문에 바로 링크해서 이용하시면 트래픽 부하를 줄일 수 있습니다. 링크 파일 주소는 아래와 같습니다.

 

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/

css/font-awesome.min.css" rel="stylesheet" />

 

관리자로 들어가서 HTML/CSS 편집창을 엽니다. 그리고 <HEAD> 사이에 CSS 외부 링크를 복사해서 붙여 넣습니다. 그럼 사용을 위한 환경설정은 끝난 것입니다.

티스토리 Font Awesome 사용하여 인포그래픽 폰트 아이콘 삽입하는 방법

 

이제 사이트에 아이콘을 표시해 보겠습니다. 아이콘을 적용하려면 <i> 태그를 사용합니다. 아래 샘플에는 클래스에 3가지가 들어가 있는데 첫 번째 들어간 fa-li 는 리스트를 만들 때 조금 들여쓰기를 하기 위한 클래스입니다. 그리고 fa 는 공통적으로 쓰이는 스타일들을 모아 둔 것입니다. 그래서 아이콘에 해당하는 클래스와 함께 쓰입니다. 마지막으로 fa-folder 는 폴더 아이콘을 나타냅니다. 실제 아이콘 클래스는 fa-folder 가 되겠죠.

 

<i class=”fa-li fa fa-folder”></i>

 

티스토리 Font Awesome 사용하여 인포그래픽 폰트 아이콘 삽입하는 방법

 

fa-folder 와 같이 자신이 찾는 아이콘이 있다면 홈페이지의 아이콘 목록을 참고하면 됩니다. 아래 링크 주소를 클릭 몇 백 개의 아이콘들을 볼 수 있습니다. 그리고 현재에서 계속해서 아이콘들이 추가되고 있습니다.

http://fontawesome.io/icons/

티스토리 Font Awesome 사용하여 인포그래픽 폰트 아이콘 삽입하는 방법

Posted by 녹두장군