Erzsamatory Weblog


인터넷을 돌아다니다보면 이미지가 아닌 텍스트 방식의 아이콘이 표시되고 있는 것을 본 적이 있을 것입니다. 컴퓨터에서 기본적으로 제공하고 있는 특수문자도 아니고 이미지도 아니라면 어떻게 그런 아이콘을 만들 수 있었을까요? 그 비밀은 바로 Font Awesome에 있습니다. Font Awesome은 텍스트 방식으로 아이콘을 만들 수 있게 해주는 솔루션입니다. Font Awesome은 컴퓨터에서 기본적으로 제공하고 있는 아이콘을 출력하는 방식이 아닌, 특수하게 개발된 Font Awesome 아이콘 전용 폰트 파일을 이용하여 아이콘을 출력하는 방식입니다. 따라서 초보자는 쉽게 구현할 수 없는 아이콘도 Font Awesome만 이용하면 매우 간단하게 아이콘을 만들 수 있습니다. CSS만 이용하여 아이콘을 만들 수 있기 때문에 속도도 빠르고, 모든 웹브라우저에 호환됩니다. 이 글에서는 Font Awesome을 사용하는 방법에 대해서 소개하도록 하겠습니다.

Font Awesome 공식 사이트
http://fontawesome.io/


Font Awesome을 사용해야 하는 이유


이 블로그에서는 Font Awesome 폰트를 사용하고 있습니다. 모바일 환경에서 표시되는 좌측 하단의 사이드바 아이콘과 본문 하단에 출력되는 같은 카테고리 글 목록 아이콘에 Font Awesome이 사용되었습니다. Font Awesome을 사용하면 운영체제에서 기본적으로 표현할 수 없는 특수문자를 간단하게 만들 수 있다는 장점이 있습니다. 예를 들어, Font Awesome 의 말풍선 아이콘은 운영체제 기본 폰트 파일에서는 지원하지 않는 아이콘이기 때문에 이와 같은 아이콘을 만들기 위해서는 직접 포토샵과 같은 그래픽 편집 프로그램에서 새로운 아이콘을 만들어야 합니다. 하지만 Font Awesome에서는 공식적으로 지원하고 있는 아이콘이기 때문에 다음과 같은 방법을 사용하면 말풍선 아이콘을 HTML 문서에 추가할 수 있습니다.

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


Font Awesome 폰트 아이콘은 모두 벡터 방식으로 만들어지기 때문에 확대를 해도 아이콘의 모서리 부분이 깨지는 현상이 발생하지 않습니다. 하지만 포토샵에서 만들어진 아이콘은 최대 픽셀을 넘어갈 정도로 확대를 하는 경우에는 모서리 부분이 깨지는 현상이 발생합니다. 일반 레이아웃에서는 고정된 아이콘만 사용되기 때문에 Font Awesome이 그렇게 필요하지 않을 수도 있겠지만, 반응형 레이아웃에서는 데스크탑 컴퓨터나 모바일 환경에서 모두 동일한 아이콘 모양이 출력되어야 하므로, 반응형 레이아웃에서 특수한 아이콘 사용하기 위해서는 반드시 Font Awesome을 이용해야만 합니다.


Font Awesome 사용 방법


Font Awesome 공식 사이트
http://fontawesome.io/

블로그나 사이트에서 Font Awesome 아이콘을 사용하는 방법은 매우 간단합니다. 가장 먼저 Font Awesome을 사용할 때 필요한 폰트 파일과 CSS 파일을 공식 홈페이지에서 다운로드 해야 합니다. 아래 화면에서 볼 수 있는 것과 같이 Font Awesome 공식 홈페이지에서 다운로드 버튼을 누르면 ZIP 압축 파일 하나를 다운로드 할 수 있습니다. 이 압축 파일을 풀면 여러 디렉토리가 나타나는데 이 중에서 실제로 사용되는 디렉토리는 CSS 디렉토리와 Fonts 디렉토리입니다. CSS 디렉토리에 있는 파일은 Font Awesome 폰트 파일을 사용할 수 있게끔 해주는 CSS(스타일시트) 파일이고, Fonts 디렉토리에 있는 파일들은 Font Awesome의 특수한 아이콘들을 포함하고 있는 아이콘 폰트 파일들입니다.

Font Awesome 홈페이지에서 스크립트 파일과 폰트 파일을 다운로드합니다.

Font Awesome 홈페이지에서 스크립트 파일과 폰트 파일을 다운로드합니다.



하지만 Font Awesome을 사용하기 위하여 위에서처럼 공식 홈페이지에서 스크립트 파일을 꼭 직접 다운로드해야 하는 것은 아닙니다. 왜냐하면 Font Awesome 스트립트 파일은 CDN 서버를 통해서도 사용할 수 있기 때문입니다. 바로 스크립트 파일을 직접 다운로드 하지 않고 이미 인터넷 상에 등록되어 있는 스크립트 파일을 사용하는 것입니다. 초보자의 경우에는 직접 스크립트 파일을 다운로드 했을 때 어떤 파일을 사용해야 하는지 잘 모를 수도 있기 때문에, 초보자가 Font Awesome을 사용하고자 할 때에는 스크립트 파일을 직접 다운로드를 하는 것보다는 CDN 서버를 이용하는 편이 좋습니다.

또한 CDN 서버를 이용하면 서버의 트래픽 부하를 줄일 수도 있기 때문에 초보자 뿐만 아니라 일반적인 경우에도 직접 스크립트를 다운로드 하는 것보다는 CDN 서버를 이용하여 Font Awesome을 사용하는 편이 훨씬 더 좋습니다. 블로그나 사이트에서 Font Awesome의 CDN 서버 파일을 이용하는 방법은 다음과 같습니다. 아래의 태그 구문을 HTML 파일의 <HEAD> 와 </HEAD> 사이에 넣으면 Font Awesome 사용 준비가 모두 끝납니다.

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


티스토리에서 스킨 HTML을 수정하는 방법은 티스토리 블로거라면 누구나 알고 있을 것이라 생각되기 때문에 이 글에서는 따로 HTML 수정 방법에 대해서는 설명하지 않도록 하겠습니다.

Font Awesome을 이용하여 아이콘 만들기


Font Awesome을 이용하여 아이콘을 만들기 위해서는 가장 먼저 HTML 태그의 클래스 속성부터 잘 알고 있어야 합니다. 왜냐하면 Font Awesome의 모든 아이콘들은 클래스를 통해서 만들어지기 때문입니다. HTML 태그에 원하는 아이콘의 클래스 속성을 적용시키면 그 HTML 태그 앞에 Font Awesome 아이콘이 표시됩니다. 클래스는 HTML에서 스타일을 지정할 때 사용되는 태그 속성 값이라는 사실은 다들 잘 알고 있으시겠죠? 그러니 다시 말하면, Font Awesome CSS 파일에는 모든 아이콘들의 정보가 클래스로 저장되어 있다는 것을 의미합니다.

Font Awesome에서 자동차 아이콘은 fa-car 라는 클래스를 사용하고 있는데, 위에서 설명했던 것을 적용해보면, 사용자는 다음과 같은 방법으로 HTML 화면에 자동차 아이콘을 표시할 수 있습니다. 운영체제에서는 자동차 아이콘을 지원하지 않기 때문에 일반적인 방법으로는 HTML 화면에 자동차 아이콘을 표시하는 것은 불가능합니다. 하지만 Font Awesome을 사용한다면 매우 쉽게 자동차 아이콘을 화면에 표시할 수 있습니다. Font Awesome의 폰트 파일에는 매우 다양한 아이콘들이 저장되어 있습니다. 사용자는 클래스를 통해서 이 아이콘들을 꺼내 쓰는 것입니다. 매우 편리합니다. 바로 이것이 Font Awesome을 사용해야만 하는 이유입니다.

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


위의 소스코드를 보면 fa-car 클래스 앞에 fa 클래스가 하나 더 있다는 것을 알 수 있습니다. fa 클래스는 Font Awesome을 사용하기 위한 가장 기본적인 클래스입니다. fa 클래스는 Font Awesome 폰트 종류, 여백, 정렬 등의 스타일들을 포함하고 있습니다. 이 스타일들은 모든 Font Awesome 클래스에 적용되어야 하는 속성이기 때문에, 편의를 위하여 fa 클래스가 따로 만들어져 있는 것입니다.. 그러니 Font Awesome을 사용할 때에는 fa-car 클래스 뿐만 아니라 fa 클래스도 함께 적용되어야 합니다.

위와 같이 HTML을 작성하면 그 결과는 다음과 같습니다. Font Awesome 이렇게 자동차 아이콘이 화면에 표시됩니다. 정말 놀랍지 않습니까? 이렇게 만들어진 아이콘은 색깔도 바꿀 수 있습니다. Font Awesome Font Awesome 아이콘은 텍스트 형식으로 만들어진 아이콘이기 때문에 그냥 그 아이콘의 폰트 색깔을 바꿔주면 됩니다.

Font Awesome에서 사용할 수 있는 아이콘 목록
http://fontawesome.io/icons/

그런데 Font Awesome에서 제공하고 있는 아이콘의 목록를 알아야 위의 방법에서처럼 아이콘 클래스를 사용할 수 있겠죠? Font Awesome에서 제공하는 아이콘의 목록은 위의 링크에서 확인할 수 있습니다. Font Awesome에서 사용 가능한 모든 아이콘들은 위의 페이지에서 확인할 수 있으며, 사용하고 싶은 아이콘이 있는 경우에는 해당 아이콘 오른쪽에 있는 아이콘 클래스 이름을 그대로 사용하면 됩니다. 아이콘을 클릭하면 아이콘의 예시 페이지도 확인해볼 수 있습니다.

Font Awesome에서는 수 백 가지의 아이콘을 사용할 수 있습니다.

Font Awesome에서는 수 백 가지의 아이콘을 사용할 수 있습니다.



Font Awesome에서는 기본적으로 400개 이상의 아이콘을 제공하고 있습니다. 단 한 개의 폰트 파일에서 400개의 아이콘을 지원하고 있습니다. 그리고 자바스크립트도 사용하지 않기 때문에 Font Awesome은 초보자도 쉽게 사용할 수 있습니다.


Font Awesome 응용 사용 방법


Font Awesome을 사용할 때 꼭 위와 같은 방법으로만 사용해야 하는 것은 아닙니다. 위의 방법이 블로그나 사이트 본문에 아이콘을 입력할 때에는 아무런 문제가 발생하지 않겠지만, 블로그 스킨이나 사이트 레이아웃을 개발할 때에는 조금 다른 방법을 사용해야 합니다. 예를 들어, 다음과 같은 레이아웃을 구성하고 싶다고 가정합시다. 아래 스크린샷은 제 블로그의 홈 화면이며, 가장 최근 글이 보여지고 있습니다. 글 목록마다 해당 글의 태그 목록이 출력되고 있는 것을 확인할 수 있는데, 이 태그 목록 앞에는 태그 아이콘이 출력되고 있습니다. 바로 이 아이콘이 Font Awesome을 이용하여 만들어진 아이콘입니다.

태그 목록 앞에 아이콘이 표시되는 레이아웃을 구성하고자 할 때에는 Font Awesome 응용 방법을 사용하는 것이 좋습니다.

태그 목록 앞에 아이콘이 표시되는 레이아웃을 구성하고자 할 때에는 Font Awesome 응용 방법을 사용하는 것이 좋습니다.



위와 같이 반복되는 영역에 Font Awesome 아이콘을 표시하고자 할 때에는 앞서 설명했던 방법보다는 조금 응용된 방법을 사용하는 것이 좋습니다. 왜냐하면 반복되는 부분에 일일이 앞서 설명했던 <i> 태그를 사용하는 경우에는 HTML의 용량이 늘어날 뿐만 아니라 아이콘 스타일을 지정하는 방법이 조금 복잡해질 수 있기 때문입니다. 따라서 저는 다음과 같은 방법을 사용하였습니다. 태그가 출력되는 부분이 tags-area 클래스라고 할 때, 다음과 같은 스타일 정의를 하면 태그 출력 영역 앞 쪽에 태그 아이콘이 자동으로 생성됩니다. CSS에서 :before는 해당 객체의 앞 쪽을 가리키는 가상 선택자입니다. 즉, 실제로는 없는 것을 선택해주는 선택자입니다. 이 선택자와 반대되는 것으로는 :after가 있습니다.

.tags-area:before {
    content: "\f02c";
    padding-right: 10px;
    
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


위의 CSS 스크립트는 Font Awesome에서 기본적으로 제공하고 있는 fa 클래스와 fa-tags 클래스의 스타일 속성을 하나의 클래스로 합친 것에 불과합니다. 즉, 위에서 설명했던 <i class="fa fa-tags"></i> 이렇게 사용되었던 것을 <div class="tags-area">태그 내용</div> 이렇게 사용될 수 있도록 한 것입니다. 중요한 것은 모든 속성이 :before에 속한다는 것이며, 태그 내용의 스타일에는 아무런 영향을 미치지 않습니다. 일반적으로 CSS는 스타일만 지정할 수 있을 것이라 생각하는 경우가 많겠지만, CSS3로 버전이 업그레이드 되면서 이제는 CSS에서도 어느정도의 콘텐츠를 입력할 수 있게 되었습니다. :before와 :after의 가상 선택자와 content 속성을 사용하면 CSS를 통해서도 HTML에 내용을 입력할 수 있습니다.


마무리


Font Awesome은 특히 반응형 웹에서 아이콘을 출력할 때 매우 유용하게 사용될 수 있습니다. 벡터 방식이기 때문에 크기의 변화에 따라 모양이 변하지 않는다는 가장 큰 장점이 있기 때문입니다. 또한 Font Awesome 아이콘은 이미지 형식이 아니라 텍스트 형식이기 때문에 CSS를 통하여 그 디자인을 마음대로 바꿀 수도 있습니다. 위에서 설명했듯이 아이콘의 색깔은 color 스타일 속성을 통해서 바꿀 수 있으며, 아이콘의 크기, 그림자 속성 등 CSS의 모든 스타일 속성들이 적용될 수 있습니다.

Font Awesome은 홈페이지의 개발을 좀 더 쉽게 해줍니다. CSS3가 개발되면서 레이아웃에서의 이미지의 사용이 점차 줄어들고 있고, 간단한 아이콘들은 Font Awesome이 그 역할을 대신하고 있습니다. Font Awesome을 사용하여 자신의 블로그에 예쁜 아이콘들을 넣어보십시오.
http://www.erzsamatory.net/trackback/138
  1. Tracked from 백전백승
    2014/08/20 22:52
    많이 사용하는 아이콘을 이미지가 아닌 폰트로 만든 것을 Font Awesome이라고 한다. 이것은 티스토리 블로그에서 사용할 수 있어서 사용하는 것에 대해 적고자 한다. 폰트 아이콘을 사용한다면 굳이 용량 등이 부담되는 이미지 아이콘을 사용할 필요없을 것이다. 여기에서 다룰 내용은 네이버와 다음 블로그에서는 하지 못하니 하려고 하지 말기 바란다. 네이버와 다음 블로그는 쉽다는 장점이 있지만 못하는 것이 너무 많다. 반면에 티스토리 블로그는 어렵지만..
  2. Tracked from 남시언의 문화지식탐험
    2014/08/21 13:36
    [마크다운으로 블로그 글 예쁘고 편하게 쓰는 법] Font Awesome 아이콘 사용하기 Skeleton 반응형 스킨을 티스토리에 설치하게 되면 여러가지 CSS를 포함하고 있어서 다양한 방법으로 활용할 수 있습니다. 부트스트랩의 디자인을 사용할 수 있는 것 뿐만 아니라 font awesome의 아이콘 역시 자유자재로 사용할 수 있습니다. 이 아이콘은 블로그 본문내용에 포함해서 글쓰기 용도로 쓰거나 [ ]할 수 있을 뿐만 아니라, 아래처럼 특정 디자인..

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/08/20 23:05
    CSS만 알면 다양하게 활용할 수 있겠군요. 특히 <i> 대신 <div>를 사용해서 활용하는 것 참 좋았습니다. 전 무조건 <i>만 사용해야 하는 것으로 알았거든요.
    • Walter E.
      Walter E.
      2014/08/20 23:32
      CSS 소스코드를 보니 :before 가상 선택자를 사용했더라구요, 굳이 <i>를 사용할 필요가 없다고 생각해서 직접 해보니 되었습니다. ^^
      이것으로 목록 아이콘도 바꿀 수 있었습니다. ul, li 태그의 모양도 바꿀 수 있더라구요.
  2. 쥴랴나
    쥴랴나
    2015/02/06 15:46
    와우... 덕분에 도움이 되었습니다. 잘 보았습니다. 님 쵝오~ ^^
    • Walter E.
      Walter E.
      2015/02/06 15:54
      감사합니다 ^^
  3. 2016/01/15 22:25
    고맙습니다. 덕분에 외부링크 아이콘을 제대로 첨부할 수 있게 되었습니다. ^^
    • Walter Erzsa
      Walter Erzsa
      2016/01/18 17:47
      도움이 되셨다니 제가 기쁩니다 ^^
  4. 2016/01/21 01:02
    블로그가 너무 예쁩니다. 저는 현재 네이버 블로그를 운영하고 있는데 구글 애드센스를 달수가 없어서 티스토리로 만들까 고민중입니다.
    주인장님의 이 블로그는 어떤 것으로 만든것인가요? 티스토리인가요? 이글루인가요?
    그리고 네이버 블로그도 운영하시는것 같은데 똑같은 글을 티스토리와 네이버블로그에 똑같이 복사해도 될지 궁금합니다^^

    답변부탁드립니다 감사합니다^^
    • Walter Erzsa
      Walter Erzsa
      2016/01/25 09:54
      좋게 봐주셔서 감사합니다. 이 블로그는 텍스트큐브라는 설치형 블로그입니다. 티스토리와 유사한 시스템이기 때문에 스킨 공유는 가능합니다.

      네이버블로그도 운영하고 있지만, 동일한 내용을 작성하지는 않고 있습니다. 동일한 내용을 작성하면 중복된 글로 제한될 수 있습니다.
  5. 토링
    토링
    2016/10/06 12:00
    감사합니다 !! 많은 도움이 되었어요 !! ^^