Font Awesome

Tags:

概要

Font Awesomeは、アイコンをテキスト形式で作成したものである。Webブラウザでは、Font Awesomeが提供するCSSファイルを利用してアイコンを適用できる。画像ではなく、アイコンが集まったフォントだと考えればよい。このフォントファイルを取得すれば、コンピュータにインストールして各種文書に適用することも可能である。

Font Awesomeは画像ではないため速度が速いだけでなく、すべてのWebブラウザと互換性があるという利点がある。また、フォントアイコンはベクター方式なので、拡大しても崩れない。

はじめに

Font Awesomeを使う方法は大きく2つある。

  • CDNを利用する
  • ダウンロードして使用する
  • この2つの方法のうち、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にあるフォントファイルまでのパスを修正する必要がある。

アップロード後、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値の規則

アイコンの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)のマーカーとして使う

Font Awesomeのアイコンをリスト(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>