便利なWebフォントとして、世界中の人が利用している Font Awesome もバージョン5になって、しばらく経ちましたので、使い方も落ち着いてきたようです。
ということで、ボクが試行錯誤してきた使い方を簡単に書いておきます。
前回、Font Awesome 5 Free版を使うための準備が済みました。
今回は、実際に使ってみます。
使いたい絵文字を探す
まずは Font Awesome の Webサイトで、使いたい絵文字を探しました。
作業手順：
- Font Awesome の Webサイトを開く
- グローバルメニューから「Icons」をクリック
作業手順：
- すると、絵文字が一覧になったページが開く
- 左サイドバーに並んでいるフィルターを選択したり、検索ボックスに英単語を入力して、表示したい絵文字を探す
- 表示したい絵文字が見つかったら、絵文字をクリック
これ以降は、つぎの 2つの場合について説明します。
- HTML で絵文字を表示する場合
- CSS で絵文字を表示する場合
HTML で絵文字を表示
HTML で絵文字を表示する場合は、つぎに Font Awesome の Webサイトで、絵文字の記述をコピーして、HTML に貼り付けます。
記述をコピー
作業手順：
- 表示したい絵文字のページを開く
- 右サイドバーで、絵文字のカテゴリーを選択（ただし、選択可能な絵文字のみ）
- 画面下の HTML の記述を、クリップボードの絵文字をクリックしてコピー
HTML に貼り付け
<body>
～
<i class="fas fa-xxxxxxxx"></i>
～
</body>作業手順：
- 絵文字を表示したい HTMLファイルを開く
- 絵文字を表示したい場所に、先ほどコピーした HTML の記述を貼り付ける
- ブラウザで表示して確認
なお、絵文字を表示したい場所が複数ある場合には、それぞれの場所に HTML の記述を貼り付ける必要があります。
CSS で絵文字を表示
CSS で絵文字を表示する場合は、つぎに Font Awesome の Webサイトで、絵文字のコードをコピーして、CSS でスタイル定義の中に貼り付けます。
記述をコピー
作業手順：
- 表示したい絵文字のページを開く
- 画面下の 絵文字のコードを、クリップボードの絵文字をクリックしてコピー
CSS でスタイル定義
<body>
～
<span class="icon">サンプル</span>
～
</body>作業手順：
- 絵文字を表示したい HTML ファイルを開く
- 絵文字を表示したいタグに、クラス（例えば、icon）を追加
.icon::before {
content: '\fxxx';
font-weight: bold;
font-family: 'Font Awesome 5 Free';
}
作業手順：
- CSSファイルで、追加したクラス（例えば、icon）に対して、スタイルを定義
- 絵文字をタグの前に表示したい場合は、疑似要素「::before」、タグの後に表示したい場合は、疑似要素「::after」を使う
- contentプロパティに、先ほどコピーしたコードを貼り付ける（コードの最初に、バックスラッシュを入れる）
- Solidカテゴリーの絵文字の場合は、font-weightプロパティに「bold」を指定
- Regularカテゴリーの絵文字の場合は、font-weightプロパティに「normal」を指定（なお、Free版に含まれる文字しか表示されない）
- font-familyプロパティに、’Font Awesome 5 Free’ を指定
あとがき
Font Awesome がバージョン5 になった当初は、CSS での記述の仕方が、いまいち判りませんでした。
しかし、配布されている CSS ファイルの中身を見て、どうにか解決できました。
これからは、もうあまり難しい仕様にならないと、いいのだけれど。
最後に、Font Awesome を作ってくれた方、こんなに素晴らしいものを作ってくれて、ありがとうございます（日本語ですけど）。
コメント