Font Awesome

Tags:

개요

Font Awesome 은 아이콘을 텍스트 방식으로 만든 것을 말한다. 웹 브라우저에서는 Font Awesome 에서 제공하는 CSS 파일을 이용해서 아이콘을 적용할 수 있다. 그림이 아니며 아이콘이 모여 있는 글꼴이라고 생각하면 된다. 이 폰트 파일을 받으면 컴퓨터에 설치해 두고 각종 문서에 적용하는 것도 가능하다.

Font Awesome 그림이 아니기 때문에 속도가 빠를 뿐만 아니라 모든 웹 브라우저에 호환이 된다는 것이 장점이다. 그리고 폰트 아이콘은 벡터 방식이기 때문에 확대해도 깨지지 않는다.

시작하기

Font Awesome을 사용하는 방법은 크게 두 가지가 있다.

  • CDN을 이용하기
  • 다운로드 받아 사용하기
  • 두 방법 중 CDN을 이용하는 게 훨씬 쉽습니다.

다운로드 받아 사용하면 CDN 서버 장애에 대해서 걱정할 필요가 없지만, 트래픽이 소모된다는 단점이 있다.

CDN 이용하기

CDN을 이용하려면 HTML 문서의 <head>와 </head> 사이에 다음의 코드만 추가하면 된다.

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

4.4.0은 Font Awesome 버전으로, 숫자만 변경해서 최신 버전을 사용할 수 있다.

만약 CSS 파일만 수정할 수 있다면, CSS 파일 제일 위에 다음의 코드를 추가해도 된다.

@import url( "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" );

다운로드 받아 사용하기

http://fontawesome.com/

Font Awesome을 다운로드 받고 압축을 풀면 여러 폴더와 파일이 있다.

그 중에서 서버에 업로드해야 하는 파일은 css 폴더 안의 font-awesome.min.css 파일과 fonts 폴더에 안에 있는 모든 파일이다.

폴더 구조를 유지한 채 업로드한다면 그대로 사용하면 되고, 폴더 구조를 다르게 해서 업로드해야 한다면 font-awesome.min.css 파일을 열고 @font-face에 있는 font 파일까지의 경로를 수정해줘야 한다.

업로드 한 후 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가한다.

<link rel="stylesheet" href="{path}/font-awesome.min.css">

아이콘 넣기

HTML에 아래와 같은 형식으로 태그 요소를 넣으면 아이콘이 표시된다.

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

예를 들어, 아래와 같이 태그 요소를 넣으면 돋보기 모양의 아이콘이 표시된다.

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

그 밖에 여러 아이콘 코드는 Font Awesome 홈페이지의 아이콘 목록에서 찾을 수 있다.

원하는 아이콘을 클릭하면 확대된 아이콘과 코드도 확인할 수 있다.

클래스(class) 값 규칙

아이콘의 클래스 값은 아이콘 이름을 그대로 사용한다. 예를 들어 아이콘 이름이 ban이라면 이 되고,

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

아이콘 이름이 home이라면 이 된다.

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

예제) 모양은 아이콘이지만 본질은 폰트이므로 CSS로 크기나 색 등을 정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style>
      .a {
        margin: 70px 0px;
        text-align: center;
        font-size: 140px;
        color: #2196F3;
      }
    </style>
  </head>
  <body>
    <p class="a"><i class="fa fa-bullhorn"></i></p>
  </body>
</html>

아이콘을 목록(ul, ol)의 마커로 사용하기

FontAwesome의 아이콘을 목록(ul, li)의 마커로 사용할 수 있다.

이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있다.

아이콘 선택하기

마커로 사용할 아이콘을 고릅니다. 그리고 font-awesome.css 파일에서 선택한 아이콘의 코드를 찾는다.

예를 들어 angle-right의 코드는 다음과 같다.

.fa-angle-right:before {
  content: "\f105";
}

기본 마커 없애기

마커를 없앱니다.

ul {
  list-style-type: none;
}

아이콘 추가하기

아이콘을 li 요소 앞에 나오도록 한다.

li:before {
  content: "\f105";
  font-family: FontAwesome;
}

여백을 적절이 조정한다.

li:before {
  content: "\f105";
  font-family: FontAwesome;
  margin-left: -1.0em;
  margin-right: 0.5em;
}

전체 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style>
      body {
        font-family: sans-serif;
      }
      ul {
        list-style-type: none;
      }
      li:before {
        content: "\f105";
        font-family: FontAwesome;
        margin-left: -1.0em;
        margin-right: 0.5em;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</li>
      <li>Aliquam vitae aliquet ipsum.</li>
    </ul>
  </body>
</html>



최종 수정 : 2024-01-18