WebサイトでWebアイコンフォントを使う(Font Awesome5)

サイトコンテンツ作成時に、アイコンを使いたい場面はよくありますが、そのアイコンに「Font Awesome」の「Webアイコンフォント」を使う方法を紹介します。

Memo

「Webアイコンフォント」は、ウェブページ上で文字と同じように表示できるアイコンのことです。利用するメリットは、フォントなので拡大してもぼやけないことと、色やサイズを簡単に設定できることが挙げられます。

事前準備

Font Awesomeを使うには、以下の2つの方法がありますが、ここではCDN経由で使う方法を紹介します。CDNを使えば、FontAwesomeに新しいアイコンが追加されたときにダウンロードし直す必要もなく、設置も簡単です。

  • アイコンをダウンロードして、自分のサーバーにアップロードする
  • CDN(Content Delivery Network)経由で使う

事前準備は、以下のサイトで赤枠内のコードをコピーして、自分のブログやWebサイトのheadタグ内に貼り付けるだけです。

Font Awesome | Get started with Font Awesome

以上で、事前準備は完了です。

Font Awesomeの使い方:基本

基本の手順は以下のとおりです。

使いたいアイコンフォントを探す

以下のアイコン一覧のページで「Free」をクリックして、無料で利用できるアイコンを表示させ、使いたいアイコンをクリックします。

Font Awesome | icons

アイコンフォントのコードをコピー

アイコンの詳細ページで、アイコンフォントのコードをコピーします。

アイコンを表示させたい位置に貼付け

コピーしたコードを、自分のブログやWebサイトのアイコンを表示させたい位置に貼り付けます。これだけで以下のようにアイコンフォントを使うことができます。

HTMLコード:

<i class="far fa-arrow-alt-circle-right"></i>
<i class="far fa-arrow-alt-circle-right fa-2x"></i>
<i class="far fa-arrow-alt-circle-right fa-3x"></i>
<i class="far fa-arrow-alt-circle-right fa-4x"></i>
<i class="far fa-arrow-alt-circle-right fa-5x"></i>

表示:

Font Awesomeの使い方:カスタマイズ

ここでは、Webアイコンフォントのコードをカスタマイズしてできることをいくつか紹介します。

アイコンの大きさを変える

アイコンの大きさを変えるには、大きさを指定するクラスを追記します。指定可能なクラスは次のとおりです。

クラス サイズ
fa-xs 0.75em
fa-sm 0.875em
fa-lg 1.33em
fa-2x ~ fa-10x 2em ~ 10em
Memo

「em」は、親要素に対しての相対的なサイズのことです。

アイコンの色を変える

アイコンの色を変えるときには新しいクラスを作り、作ったクラスに対してCSSで色を指定します。

HTMLコード:

<i class="far fa-arrow-alt-circle-right fa-5x setRed"></i>

CSS:

.setRed {
color: red;
}

表示:

アイコンと文字の間隔を一定にする

アイコンは種類ごとに幅が異なるため、下のようにアイコンを複数並べると幅に統一感がなくなってしまいます。

Home
Info
Library

そこで、iタグに「fa-fw」というクラスを追加することで、アイコンの種類に関わらず幅を一定にすることができます。

HTMLコード:

<div><i class="fas fa-home fa-fw" style="background: MistyRose;"></i> Home</div>
<div><i class="fas fa-info fa-fw" style="background: MistyRose;"></i> Info</div>
<div><i class="fas fa-book fa-fw" style="background: MistyRose;"></i> Library</div>

表示:

Home
Info
Library

リストアイコンとして使う

順序なしリストのデフォルトアイコンを置き換えるには「fa-ul」クラスと「fa-li」クラスを使用します。

HTMLコード:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>リストアイコンを</li>
  <li><span class="fa-li"><i class="fas fa-check-square setRed"></i></span>デフォルトの</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>「・」から</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>変えることができます</li>
</ul>

表示:

  • リストアイコンを
  • デフォルトの
  • 「・」から
  • 変えることができます

まとめ

上で紹介した以外にも「回転させる」「表示角度を変える」「アイコンを線で囲む」「アイコンにアニメーションを付ける」などの色々なカスタマイズが可能です。詳しくは、以下の公式ページを参照してみてください。

Font Awesome | SVG with JavaScript | How to Use

スポンサーリンク