본문 바로가기

디자인/CSS 강좌

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

반응형



본 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.
 



반응형