웹폰트 아이콘-Font Awesome

게시자: 대문 demun 카테고리: 퍼블리셔/도구 2013.01.11 05:00

웹폰트 아이콘을 표시하는 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이하도 지원합니다.

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



신고

댓글

  1. 2014.06.20 03:49 신고 군단장  댓글주소  수정/삭제  댓글쓰기

    안녕하세요

    netdna.bootstrapcdn.com/font-awesome/3.2.1

    를 사용중인데요 더 버전높은것으로 하니,, 블로그 프리뷰 부분이 잘려서 나오더라구요

    그러면 바꾸지말고 저버전으로 써야하나요?

    min 도 제가 그냥 붙여서 쓰고있는데요 그러면 압축으로 된것인지요?
    min 붙여도 작동은 바르게 되어서요...

    • BlogIcon 대문 demun 2014.06.22 21:32 신고  댓글주소  수정/삭제

      에전에는 awesome 폰트 쓰면 안되기도 했었는데...이제 티스토리에서 잘 됩니다.
      버젼이 올라가면 html 코드도 수정이 될수도 있습니다. 아이콘의 태그부분이요....해당사항을 잘 보셔야해요...무조건 업데이트해서 무조건 이전버젼이 잘 보이는것은 아니거든요.

      min 은 압축된것입니다. 경로상에 변동이 없으면 min 으로 사용해야지요.