Font Awesomeを使用して動くアイコンフォントを使ってみよう

Font Awesomeとは何か。

アイコンをフォントとして扱える事ができるので、簡単に大きさの変更や動きを加える事ができるものです。

わざわざ画像を挿入して大きさを変えて等を行わなくてもいいので、記事を書く際に便利です。

こういうアイコンを表示する事ができます。

原理とかいいので、はやく使い方を知りたいと思う方が多いと思うので早速使い方を書いていきます。

その前に、大変わかりやすく説明されているサイトがたくさんあったので参考にさせていただきました。

この場を借りてお礼申し上げます。ありがとうございました。

スポンサードサーチ

1 Font Awesomeの使い方
2 特殊な使い方
3 おわりに

Font Awesomeの使い方

使用するまでの準備

使用するに当たって下記コードを追加します。

追加場所は<head>～</head>の中。

headタグ内に追加

Webアイコンフォントを使用するためのコード

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Webアイコンフォントに動きをつける為のコード

<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" />

補足

動かなくてもいいよ！アイコンフォントのみが使用したい！と言う方は上のWebアイコンフォントを使用するためのコードだけを追加すれば大丈夫です。

注意

バージョンはどんどん新しくなります。

この記事を書いている現在はVersion5.8です。

使用したいアイコンが表示されな等がありましたら、上のWebアイコンフォントを使用するためのコードが古い可能性があります。

Font Awesomeにアクセスし、最新バージョンを使用してください。

赤枠内のコードをコピーして上のWebアイコンフォントを使用するためのコードの変わりにこちらを追加してください。

追加場所

header.phpの<head>～</head>の中に上記コードをコピペで追加します。

外観 → テーマの編集 → header.php

使用方法

Font Awesomeにアクセスします。
有料版と無料版がありますが無料版でも使用できるアイコンがたくさんあるのでどうしても使用したいアイコンない限り無料版でも十分です。

Iconsを選びます。

ブラウザの表示が小さい場合左上のを押すとサイドにIconsが表示されます。
左側のFREEにチェックをいれると無料で使用できるアイコンが表示されます。
使用したいアイコンを選択します。
アイコンは検索する事もできます。
handと検索したのでhand一覧が表示されその中のhand-peaceを選んでみました。
コードをコピーします。
赤枠部分をクリックすると自動的にコピーされます。
アイコンを表示させたい位置にコピーしたコードを貼り付けます。
コピーしたコード
```

```
←このピースアイコンが表示されます。
例えばこのコードを記事内に書いたとします。
```
ピース！
```
するとこのように表示されます。
ピース！