[CSS] Font Awesome 아이콘 사용 방법

인터넷을 돌아다니다보면 이미지가 아닌 텍스트 방식의 아이콘이 출력되고 있는 것을 본 적이 있을 것입니다. 컴퓨터에서 기본적으로 제공하고 있는 특수문자도 아니고 이미지도 아니라면 어떻게 그런 아이콘을 만들 수 있었을까요?

그 비밀은 바로 Font Awesome에 있습니다. Font Awesome은 텍스트 방식으로 아이콘을 만들 수 있게 해주는 솔루션입니다. Font Awesome은 컴퓨터에서 기본적으로 제공하고 있는 아이콘을 출력하는 방식이 아닌, 특수하게 개발된 Font Awesome 아이콘 전용 폰트 파일을 이용하여 아이콘을 출력하는 방식입니다. 따라서 초보자는 쉽게 구현할 수 없는 아이콘도 Font Awesome만 이용하면 매우 간단하게 아이콘을 만들 수 있습니다.

CSS를 이용하여 아이콘을 만드는 방식이기 때문에 속도도 빠르고 모든 웹브라우저에서 호환됩니다. 이 글에서는 Font Awesome을 사용하는 방법을 설명하도록 하겠습니다.

Font Awesome 공식 사이트
http://fontawesome.io/

Font Awesome을 사용해야 하는 이유

Font Awesome을 사용하면 운영체제에서 기본적으로 표현할 수 없는 특수문자를 간단하게 만들 수 있다는 장점이 있습니다. 예를 들어, 인터넷에서 흔히 볼 수 있는 말풍선 아이콘은 운영체제 기본 폰트 파일에서는 지원하지 않는 아이콘이기 때문에 이와 같은 아이콘을 만들기 위해서는 직접 포토샵과 같은 그래픽 편집 프로그램에서 새로운 아이콘을 만들어야 합니다. 하지만 Font Awesome에서는 공식적으로 지원하고 있는 아이콘이기 때문에 다음과 같은 방법으로 말풍선 아이콘을 HTML 문서에 추가할 수 있습니다.

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

Font Awesome 아이콘은 모두 벡터 방식으로 만들어지기 때문에 확대를 해도 아이콘의 모서리 부분이 깨지는 현상이 발생하지 않습니다. 하지만 포토샵에서 만들어진 아이콘은 최대 픽셀을 넘어갈 정도로 확대를 하는 경우에는 모서리 부분이 깨지는 현상이 발생합니다.

일반 레이아웃에서는 고정된 아이콘만 사용되기 때문에 Font Awesome이 그렇게 필요하지 않을 수도 있겠지만, 반응형 레이아웃에서는 데스크탑 컴퓨터나 모바일 환경에서 모두 동일한 아이콘 모양이 출력되어야 하므로 반응형 레이아웃에서 특수한 아이콘을 사용하기 위해서는 반드시 Font Awesome을 이용해야 합니다.

Font Awesome 사용 방법

Font Awesome 공식 사이트
http://fontawesome.io/

블로그나 사이트에서 Font Awesome 아이콘을 사용하는 방법은 매우 간단합니다. 가장 먼저 Font Awesome을 사용할 때 필요한 폰트 파일과 CSS 파일을 공식 홈페이지에서 다운로드 해야 합니다.

아래 이미지에서 볼 수 있는 것과 같이 Font Awesome 공식 홈페이지에서 다운로드 버튼을 누르면 ZIP 압축 파일 하나를 다운로드 할 수 있습니다. 이 압축 파일을 풀면 여러 디렉토리가 나타나는데 이 중에서 실제로 사용되는 디렉토리는 CSS 디렉토리와 Fonts 디렉토리입니다. CSS 디렉토리에 있는 파일은 Font Awesome 폰트 파일을 사용할 수 있게끔 해주는 CSS(스타일시트) 파일이고, Fonts 디렉토리에 있는 파일들은 Font Awesome의 특수한 아이콘들을 포함하고 있는 아이콘 폰트 파일입니다.

Font Awesome을 사용할 때 위에서처럼 공식 홈페이지에서 스크립트 파일을 직접 다운로드해야만 하는 것은 아닙니다. 왜냐하면 Font Awesome 스트립트 파일은 CDN 서버를 통해서도 사용할 수 있기 때문입니다. 바로 스크립트 파일을 직접 다운로드 하지 않고 이미 인터넷 상에 등록되어 있는 스크립트 파일을 사용하는 것입니다. CDN 서버를 이용하면 서버 일일트래픽을 줄일 수 있기 때문에 좋습니다.

블로그나 사이트에서 Font Awesome의 CDN 서버 파일을 이용하는 방법은 다음과 같습니다. 아래의 태그 구문을 HTML 파일의 <HEAD> 와 </HEAD> 사이에 넣으면 Font Awesome 사용 준비가 모두 끝납니다.

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

CDN 서버를 보유하고 있다면 스크립트를 다운로드한 후 업로드하고 본인의 CDN 서버를 사용해도 됩니다.

Font Awesome을 이용하여 아이콘 만들기

Font Awesome을 이용하여 아이콘을 만들기 위해서는 가장 먼저 HTML 태그의 클래스 속성을 잘 알고 있어야 합니다. 왜냐하면 Font Awesome의 모든 아이콘은 클래스의 사용으로 만들어지기 때문입니다. HTML 태그에 원하는 아이콘의 클래스를 적용시키면 그 HTML 태그 앞에 Font Awesome 아이콘이 표시됩니다. Font Awesome 모든 아이콘의 정보는 CSS 파일에 클래스로 구분되어 저장되어 있습니다.

Font Awesome에서 자동차 아이콘은 fa-car 라는 클래스를 사용하고 있는데, 위에서 설명했던 것을 적용해보면 사용자는 다음과 같은 방법으로 화면에 자동차 아이콘을 출력할 수 있습니다.

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

운영체제에서는 자동차 아이콘을 지원하지 않기 때문에 일반적인 방법으로는 HTML 화면에 자동차 아이콘을 출력하는 것은 불가능합니다. 하지만 Font Awesome을 사용한다면 매우 쉽게 자동차 아이콘을 화면에 출력할 수 있습니다. Font Awesome의 폰트 파일에는 매우 다양한 아이콘이 저장되어 있습니다. 사용자는 클래스를 통해서 이 아이콘들을 꺼내 쓰는 것입니다. 매우 편리합니다. 바로 이것이 Font Awesome을 사용하는 이유입니다.

위 소스코드를 보면 fa-car 클래스 앞에 fa 클래스가 하나 더 있다는 것을 알 수 있습니다. fa 클래스는 Font Awesome을 사용하기 위한 가장 기본적인 클래스입니다. fa 클래스는 Font Awesome 폰트 종류, 여백, 정렬 등의 스타일들을 포함하고 있습니다. 이 스타일들은 모든 Font Awesome 클래스에 적용되어야 하는 속성이기 때문에 편의를 위하여 fa 클래스가 따로 만들어져 있는 것입니다.. 그러니 Font Awesome을 사용할 때에는 fa-car 클래스 뿐만 아니라 fa 클래스도 함께 적용되어야 합니다.

Font Awesome에서 사용할 수 있는 아이콘 목록
http://fontawesome.io/icons/

Font Awesome에서 제공하는 아이콘 목록은 위 링크에서 확인할 수 있습니다. 위 페이지에서 사용하고 싶은 아이콘을 찾은 경우에는 해당 아이콘 오른쪽에 있는 아이콘 클래스 이름을 그대로 사용하면 됩니다. 아이콘을 클릭하면 아이콘의 예시 페이지도 확인해볼 수 있습니다.

Font Awesome은 기본적으로 600개 이상의 아이콘을 제공합니다.

Font Awesome 응용 사용 방법

Font Awesome을 사용할 때 꼭 위와 같은 방법으로만 사용해야 하는 것은 아닙니다. 위 방법으로는 블로그나 사이트 본문에 아이콘을 입력할 때 큰 문제가 생기지 않지만, 블로그 스킨이나 사이트 레이아웃을 개발할 때에는 조금 다른 방법을 사용해야 합니다.

예를 들어, 다음과 같은 레이아웃을 구성하고 싶다고 가정합시다. 아래 스크린샷은 이전 블로그의 홈 화면이며, 가장 최근 글이 보여지고 있습니다. 글 목록마다 해당 글의 태그 목록이 출력되고 있는 것을 확인할 수 있는데, 이 태그 목록 앞에는 태그 아이콘이 출력되고 있습니다. 바로 이 아이콘이 Font Awesome을 이용하여 만들어진 아이콘입니다.

태그 목록 앞에 아이콘이 표시되는 레이아웃을 구성하고자 할 때에는 Font Awesome 응용 방법을 사용하는 것이 좋습니다.

위와 같이 반복되는 영역에 Font Awesome 아이콘을 표시하고자 할 때에는 앞서 설명했던 방법보다는 조금 응용된 방법을 사용하는 것이 좋습니다. 왜냐하면 반복되는 부분에 일일이 앞서 설명했던 <i> 태그를 사용하는 경우에는 HTML의 용량이 늘어날 뿐만 아니라 아이콘 스타일을 지정하는 방법이 조금 복잡해질 수 있기 때문입니다.

따라서 저는 다음과 같은 방법을 사용하였습니다. 태그가 출력되는 부분이 tags-area 클래스라면, 다음과 같이 스타일 정의를 함으로써 태그 출력 영역 앞 쪽에 태그 아이콘이 자동으로 생성되도록 할 수 있습니다. CSS에서 :before는 해당 객체의 앞 쪽을 가리키는 가상 선택자입니다. 쉽게 말해 실제로는 없는 것을 선택해주는 선택자입니다. 이 선택자와 반대되는 것으로는 :after가 있습니다.

.tags-area:before {
    content: "\f02c";
    padding-right: 10px;
     
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

CSS 스크립트는 Font Awesome에서 기본적으로 제공하고 있는 fa 클래스와 fa-tags 클래스의 스타일 속성을 하나의 클래스로 합친 것에 불과합니다. 본래 <i class=”fa fa-tags”></i> 이렇게 사용되었던 것을 <div class=”tags-area”>태그 내용</div> 이렇게 사용될 수 있도록 만든 것입니다.

중요한 것은 모든 속성이 :before에 속한다는 것이며, 태그 내용의 스타일에는 아무런 영향을 미치지 않습니다. 일반적으로 CSS는 문서 스타일만 지정할 수 있을 것이라 생각할 수도 있겠지만, CSS3로 버전이 업그레이드 되면서 이제는 CSS에서도 어느정도의 콘텐츠를 입력할 수 있게 되었습니다. :before와 :after의 가상 선택자와 content 속성을 활용하면 CSS를 이용하여 HTML에 내용을 입력할 수 있습니다.

마무리

Font Awesome은 특히 반응형 웹에서 아이콘을 출력할 때 매우 유용하게 사용될 수 있습니다. 벡터 방식이기 때문에 크기의 변화에 따라 모양이 변하지 않는다는 가장 큰 장점이 있기 때문입니다. 또한 Font Awesome 아이콘은 이미지 형식이 아니라 텍스트 형식이기 때문에 CSS를 통하여 그 디자인을 마음대로 바꿀 수도 있습니다. 위에서 설명했듯이 아이콘의 색깔은 color 스타일 속성을 통해서 바꿀 수 있으며, 아이콘의 크기, 그림자 속성 등 CSS의 모든 스타일 속성들이 적용될 수 있습니다.

Font Awesome은 홈페이지의 개발을 좀 더 쉽게 해줍니다. CSS3가 개발되면서 레이아웃에서의 이미지의 사용이 점차 줄어들고 있고, 간단한 아이콘들은 Font Awesome이 그 역할을 대신하고 있습니다. Font Awesome을 사용하여 자신의 블로그에 예쁜 아이콘들을 넣어보십시오.