• 목록

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

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

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

Font Awesome을 사용하면 운영체제에서 기본적으로 표현할 수 없는 특수문자를 간단하게 만들 수 있다는 장점이 있습니다.

Font Awesome에서는 공식적으로 지원하고 있는 아이콘이기 때문에 다음과 같은 방법으로 말풍선 아이콘을 HTML 문서에 추가할 수 있습니다.

​

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

​​

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

다음과 같은 방법으로 화면에 자동차 아이콘을 출력할 수 있습니다.

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

​

아래 사이트를 참고하여 다른 아이콘도 추가할 수 있다.

​https://fontawesome.com/v4.7.0/icons/

​

​

​

목록 아이콘은 다음과 같다

<i class="fa fa-list" aria-hidden="true"></i>​

​

​