본 CSS강좌는 Chrome에서 작성했습니다. CSS3나 간혹 HTML5를 사용하고 있기 때문에 IE9이하 버전이나 오페라,사파리 등에서는 제대로 나오지 않을수 있다는 점을 미리 말씀드립니다.
그리고 오늘 알아볼 FontAwesome은 개인 홈페이지 및 설치형 블로그인 Tistory나 워드프레스 등에서는 잘 되지만 네이버나 다음등의 블로그에서는 사용할 수 없습니다.
인터넷을 돌아다니다 보면 위와 같은 메뉴나 소제목 타이틀 등을 자주 볼 수 있습니다. 메뉴옆에 그림으로 집이나 책, 연필, 돋보기 등의 아이콘이 보입니다. 대부분 FontAwesome과 같은 아이콘 폰트를 사용한 것입니다.
예전에는 이런 것들은 아이콘 이미지를 업로드해서 만들었습니다. 이미지 파일이다 보니 좀 크게 사용할려고 하면 이미지의 계단현상들이 나타나곤 했습니다.
하지만 오늘 알아볼 FontAwesome는 일종의 웹폰트처럼 사용할 수 있도록 되어 있으며 벡터형식이어서 확대나 축소를 해도 깨끗하게 나옵니다. 또한 크기가 유동적으로 바뀌는 반응형 스킨을 사용할 경우 이미지 아이콘보다는 당연히 좋은 품질을 기대할 수 있겠죠. 그래서 요즘 블로그나 개인 홈페이지에 많이 사용하는 것 같습니다. 종류 또한 400가지가 넘고 계속 업데이트 되고 있으니 FontAwesome 홈페이지 가셔서 확인해 보시기 바랍니다.
설치 및 사용방법 또한 아주 간단합니다.
사용하기 위해서는 아주 약간의 CSS 지식만 있으면 됩니다.
1.사용하기 위해서는 우선 <head>와 </head>사이에 아래의 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> 축구공
<i class="fa fa-car"></i> 자동차
<i class="fa fa-download"></i> 다운로드
<i class="fa fa-futbol-o fa-lg"></i> 축구공
<i class="fa fa-car fa-3x"></i> 자동차
<i class="fa fa-download fa-5x"></i> 다운로드
좀 더 자세한 사용법은 FontAwesome 홈페이지의 Example페이지를 보시면 됩니다.
또한 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>
오늘은 CSS 강좌와는 큰 관련이 없지만 많이들 사용하시는 것이어서 소개해 드렸습니다.
즐거운 하루 되세요 Vanxy.
