article search result of 'font awesome 사용법' : 2

  1. 2015.04.09 fontawesome 다운받아 이용하는 법
  2. 2015.03.20 font awesome 사용법(웹 아이콘 이용하기) (1)

fontawesome 다운받아 이용하는 법

 

 

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 사용법(웹 아이콘 이용하기)

 

 

 

지구별에
티스토리 툭탁툭탁 2015. 4. 9. 10:23

댓글을 달아 주세요

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

 

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

 

지난 시간엔 부트스트랩을 이용하여 아이콘 넣는 법을 배워 보았어요.

 

부트스트랩 사용법 (glyphicons 아이콘 넣기)

 

오늘은 font awesome 을 이용할 텐데 font awesome은 아이콘으로 사용되는 웹폰트 중에서

 

가장 잘 알려져 있고, 특히 부트스트랩과도 함께 사용할 수 있습니다.

 

원래 부트스트랩 2.0 버전에서  아이콘(Glyphyicons)은 이미지 형식이었기에, 크기 조절이나, 

 

색상 혹은 배경색 바꾸기가 되지 않았습니다.

 

이때 font awesome은 font 형식으로 제공했기에, 크기 조절, 색상, 배경색 바꾸기가 자유로웠습니다.

 

하지만 부트스트랩 3.0 버전부터는 아이콘을 font 형식으로 제공합니다.

 

Font Awesome과 Glipyicons의 차이는 다음을 참조

 

 

 

본격적으로, font awesome 사용법을 알아보겠습니다.

 

 

Font Awesome 으로 아이콘 넣기

 

1. head 에 아래 링크를 삽입(font awesome의 가장 최신 버전임)

 

fontawesome link.txt

 

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

 

위 주소는 프로토콜 상대 주소입니다. 위 링크 삽입 후에도 실행되지 않을 경우 href=" 뒤에 http: 혹은 https:를 삽입합니다.

 

 



2. 그러고 나서, 아래 사이트로 이동하여 원하는 아이콘을 찾습니다.

 

http://fontawesome.io/icons/

 

 

저는 위 이미지에서 bars라고 된 아이콘을 쓰고 싶습니다. 마우스를 대면 배경이 초록으로 표시되며

 

클릭해서 들어가 봅니다. 

 

3. 클릭하면 이 아이콘 사용법이 나옵니다.

 

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

 

 

font awesome에서는 i 태그를 사용했지만, span 태그를 사용해도 됩니다.

 

클래스명만 정확히 적어주시면 됩니다. 

 

<span class="fa fa-bars"></span>

 

크기를 2배로 하고 싶으면 뒤에 fa-2x, 3배로 하고 싶으면 fa-3x를 삽입합니다.

 

<i class="fa fa-bars fa-2x"></i>

 

자세한 사용 예는 이곳을  참조해주세요.

 

 

▶실행 화면

fontawesome example.html

 

 

 

※ 주의 사항

 

font awesome 또한 최근 주요 브라우저에서 모두 지원이 되지만, ie7은 지원이 안 됩니다.

 

ie7을 지원하려면 다음 링크를 삽입

 

*단 ie7은 Font Awesome 4.3.0버전을 지원하지 않습니다.

 

Font awesome 3.2.1 버전에서 ie7을 지원함

 

<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

 

그러므로 아래 박스처럼 css링크도 3.2.1 버전을 사용해야 하며, http://fontawesome.io/3.2.1/get-started/

 

font icons 역시 3.2.1 버전을 사용합니다. http://fontawesome.io/3.2.1/icons/

 

사실 3.2.1 버전은 더 이상 공식적으로 지원이 되지 않는 버전입니다.

 

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

 

 

지금까지 font awesome 사용법을 알아 보았는데,

 

저는 CDN(Content Delivery Network) 방식을 이용했습니다. 즉 인터넷으로 링크를 내려 받아 사용한 것이지요.

 

하지만 직접 파일을 다운받아 사용하는 방법도 있습니다.

 

http://fontawesome.io/3.2.1/

 

http://fontawesome.io/

 

다음 시간에 더 자세히 알아 볼게용~

 

 

 

css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴.

 

css로 반응형 메뉴 만들기 off canvas (left)

 

[css]드롭다운 메뉴 만들기(기초)

 

지구별에
티스토리 툭탁툭탁 2015. 3. 20. 13:11

댓글을 달아 주세요

  1. yeonji_qp 2020.05.21 12:26 신고  수정/삭제  댓글쓰기

    도움 많이 받아갑니다 ^_^

Powerd by Tistory, designed by criuce