Font Awesome (フォントオーサム) 基本的な icon の使い方と カスタマイズ

Font Awesome (フォントオーサム) の初期設定が終わりましたら、
実際にどのように使用していくのかを わかりやすく解説していきます。

設定がまだの方は先にこちらの記事からどうぞ↓
【WordPress】Font Awesome (フォントオーサム) の設定のしかた

アイコンを検索する

Font Awesome アイコン一覧 から使用したいアイコンを選びます。

アイコンの検索は カテゴリを絞り込んでいくと探しやすいです。

コードの使い方

今回、 Font Awesome の基本的なカスタマイズとして
カワイイ　ブタの貯金箱を例に見ていきます。アイコン画面の上にコード が表示されています。
これが、CSS や 投稿画面で使用する アイコンコード になります。

コードは一番左から
アイコンマークのユニコード
これは グラフィックス の作成などに使用するものなので
通常、私たちが使用するのは 残りの2つの コード になります。

英数字の組み合わせのユニコード
ここでいうと f4d3 は サイトの 外観カスタマイズする際に
使用する CSS用 のコードになります。

HTMLコード
こちらが投稿記事の作成画面で使用するコードになります。

それぞれの コードに カーソル を合わせると COPY の文字が表示され
そのまま クリックすると コードをコピーすることができます。

テキストエディタ画面 – HTML に記述する-

それでは テキストエディタ画面 で記述してみましょう。

このコードを記述するだけでアイコンを呼び出すことができます。

こちらの画像のように ビジュアル画面では なんの表示もされませんが
プレビューで確認して頂くと ちゃんと表示されています。

アイコン の カスタマイズ

アイコンを呼び出すことができたら 次にカスタマイズをしてみましょう。

サイズの変更のしかた

　← コードそのままのサイズのブタさんです。^^
色もまだ黒のままですね。

サイズは 現在使用しているフォントサイズを基準に アイコンのサイズも決まります。

サイズの倍率の目安はこちら　↓

変更は基本的なコードの piggy-bank の後のコードをプラスするだけです。
先ほどのブタさんに この fa-2x のコードをつけてみます。
1em という単位は１文字分の長さにあたります。
今は 2x に設定したので 文字に対して２倍の大きさになったというわけです。

微妙なサイズ調整

先ほどの基本のサイズよりも微妙に設定したいという場合があると思います。

サイズは以下のようなコードで指定することができます。

サイズ変更は<div> や <span>を使用して指定できますが
指定するコードで下にくる文字との間隔が違ってきます。

コードごとの画像と文字の間隔を見てみてください。

アイコンは文字のサイズに対して設定されますので
div の場合、文字自体を サイズ変更しての設定で
span は アイコン自体の font-size を変更してしまうという感じです。

divを使用する方が、余分なスペースを取られることがないので
サイト全体のバランスから考えた場合、
こちらでサイズ調整をする方がいいのではないでしょうか?

それでは divを使用したコードの サイズ指定の画像を見てみます。

先ほどの約半分のサイズになりました。

サイズは em だけではなく px を使用することもできます。
一度、試してみてくださいね。

色を変える

　こちらのブタさんは fa-3x のサイズ設定です。
サイズと色の両方の記述をしていきます。

コードは先ほどの サイズごとのアイコンコード と別で
<span> を使った記述でカラーを指定していきます。

今回の色は “dodgerblue" という名前での表記ですが
通常の # から始まる数字のカラーコードでも同じように表記できます。

カラーの色見本コードはこちらを参考にしています。
参考にしてみてください。→　WEB色見本 大辞典

CSSカスタマイズ でのつかいかた

英数字の組み合わせの ユニコード を使って アイコンを作成してみましょう。

見出しアイコンの表示

こちらの見出しは 同じくらいのサイズになっていますが H3 と H４の見出しになります。

見出しにアイコンを使用したい場合、CSS（スタイルシート）にコードを追加記述します。
その際、before という 擬似要素 を使用します。

外観カスタマイズ の 追加CSS から このコードをベースに
お好きなアイコンを選んでみたり
サイズなどのバランスをアレンジしてみてください。

まとめ

FontAwesome の基本的な 使いかたについて のまとめでした。

また、何度も調べるのは大変なので 気に入ったアイコンのコードを
SublimeText などに 書き込んでおいたり
よく利用しそうなアイコンは 定型文登録に登録しておいたりすると便利です。
ぜひ、参考にしてみてください。

詳しくはこちら… SublimeText インストールと日本語変換のしかた
定型文登録をフル活用 !! 文字登録で効率よく記事を作成できる機能

そのほか ラインを使った見出しのカスタマイズについてはこちら
→ 【 WordPress 】見出しをラインやアイコンでカスタマイズしてみる