Main menu

Font Awesome 강좌 | 아이콘 넣기

아이콘 넣기

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>

Created on 2015-10-08 | Updated on 2015-10-08

이 글을 공유하기

Kakao