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

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

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

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

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

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

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

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

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

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

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

Font Awesome 으로 아이콘 넣기

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

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

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

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

클릭해서 들어가 봅니다.

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

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

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

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

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

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

▶실행 화면

※ 주의 사항

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

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

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

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

그러므로 아래 박스처럼 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 버전은 더 이상 공식적으로 지원이 되지 않는 버전입니다.

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

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

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

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