CSS 기초강좌 18 (아이콘 폰트 FontAwesom 이용하기)CSS 기초강좌 18 (아이콘 폰트 FontAwesom 이용하기)

Posted at 2014.10.15 18:47 | Posted in 디자인/CSS 강좌



본 CSS강좌는 Chrome에서 작성했습니다. CSS3나 간혹 HTML5를 사용하고 있기 때문에 IE9이하 버전이나 오페라,사파리 등에서는 제대로 나오지 않을수 있다는 점을 미리 말씀드립니다.


그리고 오늘 알아볼 FontAwesome은 개인 홈페이지 및 설치형 블로그인 Tistory나 워드프레스 등에서는 잘 되지만 네이버나 다음등의 블로그에서는 사용할 수 없습니다.




  3. CSS Font Awesome 알아보기


인터넷을 돌아다니다 보면 위와 같은 메뉴나 소제목 타이틀 등을 자주 볼 수 있습니다. 메뉴옆에 그림으로 집이나 책, 연필, 돋보기 등의 아이콘이 보입니다. 대부분 FontAwesome과 같은 아이콘 폰트를 사용한 것입니다.

예전에는 이런 것들은 아이콘 이미지를 업로드해서 만들었습니다. 이미지 파일이다 보니 좀 크게 사용할려고 하면 이미지의 계단현상들이 나타나곤 했습니다.


하지만 오늘 알아볼 FontAwesome는 일종의 웹폰트처럼 사용할 수 있도록 되어 있으며 벡터형식이어서 확대나 축소를 해도 깨끗하게 나옵니다. 또한 크기가 유동적으로 바뀌는 반응형 스킨을 사용할 경우 이미지 아이콘보다는 당연히 좋은 품질을 기대할 수 있겠죠. 그래서 요즘 블로그나 개인 홈페이지에 많이 사용하는 것 같습니다. 종류 또한 400가지가 넘고 계속 업데이트 되고 있으니 FontAwesome 홈페이지 가셔서 확인해 보시기 바랍니다.



설치 및 사용방법 또한 아주 간단합니다.

사용하기 위해서는 아주 약간의 CSS 지식만 있으면 됩니다.


1.사용하기 위해서는 우선 <head>와 </head>사이에 아래의 CDN 코드를 넣어주시면 됩니다.

CDN

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


2.이제 사용할 준비는 다 끝났고, 원하는 곳에 아래와 같이 <i></i>태그와 class명을 넣어주면 됩니다.

<i class="아이콘이름"></i> 

예제

<i class="fa fa-camera-retro"></i> 카메라

결과:    카메라


아이콘의 종류는 FontAwesome 사이트에 가셔서 고르면 됩니다.



이제 한번 아이콘폰트를 사용한 예제를 보시죠.

예제

<i class="fa fa-futbol-o"></i>&nbsp;축구공

<i class="fa fa-car"></i>&nbsp;자동차

<i class="fa fa-download"></i>&nbsp;다운로드


결과 :  축구공  자동차  다운로드


크기변경

<i class="fa fa-futbol-o fa-lg"></i>&nbsp;축구공

<i class="fa fa-car fa-3x"></i>&nbsp;자동차

<i class="fa fa-download fa-5x"></i>&nbsp;다운로드


 축구공    자동차    다운로드

좀 더 자세한 사용법은 FontAwesome 홈페이지의 Example페이지를 보시면 됩니다.
Font Awesome Example Page로 가기


또한 FontAwesome와 CSS를 같이 사용할 수 도 있습니다.

CSS 스타일을 먼저 정해주고 class를 이용해서 <i>태그를 좀더 치장하는 것이죠. 아래의 예제는 <span>태그에 my_fontaw 와 my_fontmu 클래스를 같이 적용시킨 후 FontAwesome인 <i>를 사용했습니다.

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


<style>

.my_fontaw{

        border: 2px solid #27a9e3;

        background-color: #27a9e3;

        width: 40px;

        height: 40px;

        text-align: center;

        display: table-cell;

        vertical-align: middle;

        border-radius: 45px;

        color: #166548;

        box-shadow: 2px 2px 2px #999;

    }

.my_fontmu {

        color:white;

        font-size:25px;

  }

</style>


<div style="display:table;">
<span class="my_fontaw my_fontmu"><i class="fa fa-search"></i></span>&nbsp;
<span class="my_fontaw my_fontmu"><i class="fa fa-sitemap"></i></span>&nbsp;
<span class="my_fontaw my_fontmu"><i class="fa fa-file-text-o"></i></span>&nbsp;
<span class="my_fontaw my_fontmu"><i class="fa fa-list"></i></span>&nbsp;
<span class="my_fontaw my_fontmu" style="color:yellow;"><i class="fa fa-bank"></i></span>&nbsp;
</div>



결과 :
         



만약 모든 브라우져에서 이런 폰트를 사용하고 싶으시다면 현재로서는 캡쳐해서 이미지로 바꾸어서 처리할 수 밖에 없습니다.

오늘은 CSS 강좌와는 큰 관련이 없지만 많이들 사용하시는 것이어서 소개해 드렸습니다.

즐거운 하루 되세요 Vanxy.
 



저작자 표시 비영리 변경 금지
신고

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

  1. 지나가던행인1
    저번에 들렸을 때 즐겨찾기 해뒀는데 혹시나 새 포스트가 떴나 싶어서 왔더니 있네요 ㅎㅎ..
    오늘도 설명 알아듣기 쉽게 잘하시네요b
  2. 초보라 잘 몰랐는데 글을 읽어보고서야 폰트어썸에 대해 이해가 되었네요.
    아무것도 모르고 소스만 같다 붙여넣기 하니 안되었거든요ㅠㅠ

    그리고, 주인장님 혹시 이 글 처음 시작할 때 Home Library Applications Settings 메뉴를 가로로, 세로로 만들고
    마우스 오버시 색상까지 있게 한 메뉴... 혹 괜찮으시면 소스를 알 수 있을까요?

    저도 저렇게 만들어 보고 싶은데 잘 몰라서요. 견본보고 이것저것 해 보고 싶은 마음에 부탁드려봅니다^^
    • 2015.01.15 21:56 신고 [Edit/Del]
      방문과 댓글 감사합니다.
      위 소스코드는 블로그 포스팅하면서 대충 만드느라 허접합니다.
      만약 그래도 참고 하시겠다면 아래의 주소에 올려놓았습니다.
      PC로 보셔야 잘 보이고 스마트폰은 잘 안보일 것입니다. 소스코드를 imbeding 시켰기 때문에...

      http://nine8007.tistory.com/entry/%EB%B9%A1%EB%B9%A1%EC%9D%B4%EB%8B%98%EC%9D%B4-%EB%AC%BC%EC%96%B4%EB%B3%B4%EC%8B%A0-%EC%86%8C%EC%8A%A4%EC%9E%85%EB%8B%88%EB%8B%A4

      이 블로그의 "필요없는창고"라는 폴더에 있습니다.
  3. 와^^ 빠른 답변 감사드려요ㅎㅎ
    블로그의 컴퓨터 관련 강좌와 글들을 읽어보니 참 이해하기 쉽게 잘 올려놓으신 것 같아요.
    다른 글들도 계속 읽어보고 있었는데 초보여도 따라가면서 읽어보니 쉽게 이해가 되네요.

    종종 들러서 배우고 가겠습니다.^^
  4. 천년세월
    php 소스 공부중인 초짜입니다^^
    소스를 들여다 보며 편집 하던중 아이콘 하나가 안 따라와서 도대체 뭣때문에 안따라온거냐?
    아이콘이라면 분명 그림 파일일텐데 아무리 살펴봐도 이미지 관련 태그는 없고 딸랑 <i class="fa fa-user">
    요런것만 있으니 황당할수 밖에요..
    처음엔 저게 아이콘 폰트라는것을 전혀 눈치채지 못했으니
    뭐 이런게 다 있냐?
    지금 마술을 부리고 있는겨?
    딱 요런 심사로 불편해 하던중 구글링 시켰더니^^
    결국 요기까지 오게 되었는데..
    유익한 정보 감사드립니다^^
  5. 행인2
    설명이 깔끔하게 잘 되어있네요 좋은 정보 잘보고갑니다 ^^^