2 flat logo on transparent 256
2018-02-13

サイトへ簡単にアイコンを無料設定できる|Font Awesomeの使い方|サンプルコード付き

495 min

Webサイト制作やWebアプリケーションを作成していると ちょっとしたアイコンを利用したいシーンがあると思います。 その際に簡単に利用できて、なおかつオシャレなアイコンを提供しているFont Awesomeを紹介します。

Font Awesomeの利用方法は2つありCDNを利用する場合とダウンロードして読み込む場合です

CDNを利用する場合は公式サイトに記載のある最新のCDNを利用します。 ダウンロードして利用する場合は同じく公式サイトから ダウンロードします。

今回はCDNを利用して解説します。

Font Awesomeのサンプルコード

下記のサンプルコードをメモ帳などに貼り付け、htmlで保存し 展開すれば、内容を閲覧できます。

<html>

<head>
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>

<body>
  <div>
    <p><i class="fas fa-check-circle color-test"></i>アイコンが表示されました</p>
    <p><i class="far fa-check-circle">アイコンが表示されました</i></p>
    <p><i class="fas fa-check-circle fa-lg"></i>アイコンが表示されました</p>
    <p><i class="fa fa-check-circle fa-2x"></i>アイコンが表示されました</p>
    <p><i class="fa fa-check-circle fa-3x"></i>アイコンが表示されました</p>
    <p><i class="fa fa-check-circle fa-4x"></i>アイコンが表示されました</p>
    <p><i class="fa fa-check-circle fa-5x fa-spin"></i>アイコンが表示されました</p>
  </div>
</body>

</html>

Font Awesomeのコード例と解説

CDNのリンクはヘッダに設定し、呼び出したいアイコンはで囲みます。 アイコンは有料版と無料版があり、無料版のリンクに遷移するとアイコンの一覧があります。

コード例に記載されているアイコンを利用しようとした場合は、アイコンのリンク へアクセスし左下にあるをコピーして利用します。

色を変更する

下記の様にtest-colorというcssを追加して色を変更することも可能です

  <i class="far fa-check-circle test-color">
.test-color:before {
   color: #bd5612;
}

※:beforeを設定する必要があります。

アイコンの大きさを変更する

コード例に記載されているfa-2xなどを利用してアイコンの大きさを変更することも可能です。

fa-lg (1.333em)
fa-2x (2em)
fa-3x (3em)
fa-4x (4em)
fa-5x (5em)

動きを追加する

fa-spinやfa-pulseを利用してアイコンを回転させることも可能です。

  <!-- 動きを追加 -->
  <div class="fa-3x">
    <i class="fas fa-spinner fa-spin"></i>
    <i class="fas fa-circle-notch fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-cog fa-spin"></i>
    <i class="fas fa-spinner fa-pulse"></i>
  </div>

※fa-spinやfa-pulseは次で紹介するアニメーションCDNを利用する必要はありません。

アニメーションを追加する|サンプルコード

さらにアニメーション用のCDNを読み込めば動的なアイコン表示も可能です。

<html>

<head>
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <!--追加アニメーションオプション -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
</head>

<body>
    <!-- アニメーション -->
  <div class="fa-3x">
    <p><i class="fas fa-spinner faa-float animated"></i>横揺れ</p>
    <p><i class="fa fa-heart faa-pulse animated"></i>鼓動させる</p>
    <p><i class="fa fa-star faa-flash animated"></i>点滅させる</p>
  </div>

</body>

</html>

英語になりますが、アニメーションの動作例はこちらのサイトの On DOMの部分に記載されています。

その他の関連記事

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

前の記事
次の記事