본문 바로가기
티스토리 툭탁툭탁

fontawesome 다운받아 이용하는 법

by 지구별에 2015. 4. 9.

 

 

Font Awesome 다운받아 이용하는 법

 

지난 시간에는 font awesome을 인터넷 링크로 내려받아 사용하는 법을 알아보았어요.

 

font awesome 사용법(웹 아이콘 이용하기)

 

오늘은 직접 다운 받아 서버에 올려 사용하는 방법을 알아보겠습니다.

 

 

1. 다음 페이지로 이동하여, Download 버튼을 누릅니다.

 

 

 

 

 

 

2. 압축 파일을 풀면

 

font-awesome-4.3.0 폴더가 생깁니다.

 

하위 폴더는 다음과 같습니다.

 

 

 

css- font-awesome

       font-awesome.min

fonts-FontAwesome

        fontawesome-webfont

        fontawesome-webfont.eot

        fontawesome-webfont.svg

        fontawesome-webfont.woff

        fontawesome-webfont.woff2

less

scss

 

less와 scss는 제가 이용법을 모르므로, 상세 파일명을 적지 않았습니다.

 

css는 fontawesome 스타일 양식이라고 생각하면 됩니다. 확장명 min이라고 되어 있는 것은

        저용량화시킨 것.

 

fonts 폴더에 여러 파일이 있는데, eot, svg, woff 등의 차이는 아래 링크 참조해 주세요.

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)

 

 

3. css와 fonts 폴더에 있는 파일을 모두 서버에 올립니다.

 

   less와 scss도 필요하신 분은 전체를 올립니다.

  

 

4. head 안에 다름 링크를 삽입합니다.

 

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

 

href=" " 안에는 font-awesome.min.css가 있는 경로명입니다.

 

위 링크의 경로는, fontawesome 홈페이지에서 제공하는 기본 링크로, 이 링크 그대로 사용하실 분은

위 경로대로 폴더를 만들어 주어야 합니다.

 

링크 경로를 새로 만들 때 주의하실 점은,  font-awesome.css 파일을 열어 보면 상단에 font path라고 나오는데

 

fonts 폴더 안에 파일의 경로에 알맞도록 조정해주세요.

 

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

 

 

만일 ie7 지원을 위해 fontawesome 3.2.1 버전이 필요하신 분은 아래 링크로 들어가셔서 다운 받으시면 됩니다.

 

http://fontawesome.io/3.2.1/

 

fontawesome 아이콘 넣는 법은 아래 글 확인해 주세요.

 

font awesome 사용법(웹 아이콘 이용하기)

 

 

 

반응형

댓글