웹폰트 아이콘을 표시하는 Font Awesome 에 대해서 소개합니다.

Font Awesome -> http://fortawesome.github.com/Font-Awesome/


Font Awesome 는 부트스트랩을 지원합니다.

부트스트랩 스킨을 사용하는 분이면 이걸 추천합니다.


문제는 티스토리에서는 파이어폭스가 제대로 표시하지 못하는 단점이 있습니다. 이유는 도메인때문인것으로 알고 있습니다. 

티스토리쪽에 질문을 남겼는데 언제 해답이 올런지는 아직 미지수.....


여하튼 웹폰트를 사용해서 아이콘을 표시한다는 겁니다.

이전에도 이와 비슷한 글을 남긴적이 있습니다.

@font-face kits를 이용하여 버튼 아이콘 만들기-고급팁 ->  http://demun.tistory.com/2055


Font Awesome 홈페이지에 방문하시면 어떻게 사용하는지 어떤 아이콘을 표시하는지 다 나와 있습니다.

사용법은 홈페이지에서 웹폰트를 다운로드 받아서 압축을 해제합니다.

CSS 폴더에 보면 font-awesome.min.css 와 IE7버젼이하를 위해 font-awesome-ie7.min.css 링크시켜주면 됩니다.




한가지 경로를 수정해줘야 합니다.

CSS 파일을 배포형태로 분기해서 사용하려면 아래처럼 head 안에 링크시켜줘야 합니다.

<head>
 .......
    <link rel="stylesheet" href="./images/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <!--[if lte IE 7]>
        <link rel="stylesheet" href="./images/font-awesome-ie7.min.css" type="text/css" />
    <![endif]-->
 .......
</head>

또 경로가 위처럼 되어 있으면 티스토리의 경우 직접 업로드 하므로 아래처럼 수정해줘야 합니다.

/* 이부분을 */
@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff') format('woff'),
    url('../font/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 아래처럼 수정해줘야 합니다. */
@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot');
  src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('fontawesome-webfont.woff') format('woff'),
    url('fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

만약 style.css 에 포함해서 작성할경우는 폰트 이름앞에 url('./images/fontawesome-webfont.eot') 이런식으로 images 를 넣어주면 됩니다.

만약 또 안될때는 상대경로가 아닌 절대경로로 변경해주세요.


사용할때는 i 클래스를 대체로 사용합니다.

홈페이지에 예제가 많이 나와 있습니다.

아래처럼 Reload 아이콘을 표시하고 싶을때는 icon-repeat 를 사용하면 됩니다.





이처럼 Font Awesome 는 부트스트랩을 지원하며 less, sass 도 지원하고, IE7이하도 지원합니다.

매우 광범위하게 사용되는 웹폰트 아이콘 입니다.