Font Awesomeアイコン｜投稿ページからHTMLコードでカスタマイズする方法
Font Awesomeは Webサイトの見出しやサイドバー、ページ内で使用するなど
様々なシーンで活躍するアイコンです。
デフォルトでは文字サイズと同じ大きさ、色は黒。といったシンプルな状態ですので
使用する場面に合わせて サイズや色のカスタマイズが必要になります。
見出しやサイドバーにアイコンを設置したい場合、
スタイルシート (CSS) に 色・フォントサイズなどを指定することでカスタマイズが完了します。
投稿記事で使用する場合は HTMLコードでサイズや色を設定していく必要がありますので このカスタマイズ方法、使いかたについてまとめていきます。
基本のコードと記述の基本
Font Awesomeの初期登録などがまだの方はまずはこちらからどうぞ
Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) ｜無料で使えるアイコンの登録と設定【 WordPress 】
無料で使えるFont Awesome アイコンの基本的な使いかた｜WordPress
Font Awesomeの設定で使用した feather を使って解説していきます。
アイコンのHTMLコード部分 <i class="fa-solid fa-feather"></i> を
コピーしたものを 投稿編集の テキストエディタ に記述していきます。
気を付けないといけないのは </i> の後に文字を入れないとコードは消えてしまいます。
相対的なアイコンと文字サイズ
通常のアイコンサイズは Webサイトで指定したフォントサイズになります。
アイコンのサイズを変更したい場合、先ほどのコードにサイズ指定のコードを追加しますが
文字のサイズとの比率が合わない などという問題が起こることがあります。
サイズ指定する場合、アイコンコードの後ろに fa-●● と記述します。
アイコンコードでのサイズ指定は 相対的なアイコンサイズ つまり、
文字は通常の記事に使用する文字のサイズで指定したサイズのままで アイコンだけ大きさが変わるということになります。
サイズのコードに対しての 文字サイズはこのようになっています。
実際の大きさはこんな感じです。
こんなにアイコンが大きくなっても 文字は通常のままなのです。
アイコンと文字のサイズを揃える
文字とアイコンを同じくらいのサイズにする場合、div やspan を使ってコード指定します。
図では どちらも【アイコンサイズ 3em 】指定でコードの前に文字を入れています。
feather 3em < div or span ~ といったコードです。
試しに アイコンの前に文字を入れてみましたが div では
アイコンと同じ列に文字を入れることができず１行上に表示される形となり、
余分なスペースも出来てしまっていました。
|
1 2 3 4 5 6 7 |
/*Font Awesome アイコンと文字サイズを同じに指定 -span*/ <span style="font-size: 3em;"><i
class="fa-solid fa-feather"></i>●●</span> /*Font Awesome アイコンと文字サイズを同じに指定 -div*/ <div style="font-size: 3em;"><i
class="fa-solid fa-feather"></i>
●●</div> |
後に記述する文字（文章）は </i> と </●●>の間に記述します。
余分なスペースの調整
div を使った場合に アイコンの前の行との中途半端なスペースのは
前の文字（文章）の margin を調整することで改善することができます。
＊ アイコンの方で調整する場合、margin-top で調整することも可能です。
span と div の表示の違い – まとめ –
使用したい場所によって span と div を使い分けることができますが コードの記述のしかたに違いがあります。
それぞれに 記述を間違うとコードが消えてしまいアイコンが表示できないので注意が必要です。
・ アイコンの前に文字を入れることができる
・ アイコンの後に文字を入れなくてもコード（アイコン）が消えない
・</span> は下の行に表示しないとコード（アイコン）が消える
divでは…
・アイコンの前に文字を入れることができない
・</i> の後に文字などの記述が必要
色を変えてみる
次にサイズと色の両方の指定をしてみます。
今回のコードは <span> で色の指定、基本のコードにサイズ指定したものを組み合わせたコードです。
|
1 2 3 |
<span style="color: dodgerblue;"><i
class="fa-solid fa-feather fa-3x"></i> </span> |
色は “dodgerblue" などといった カラーネームか ＃から始まるカラーコードで指定します。
＊カラーコードは WEB色見本 大辞典 が参考になります。
補足情報！
最後に Font Awesome の使いかたについて関連する記事をご紹介します。
CSSカスタマイズ
外観カスタマイズから 見出しやサイドバーなどで アイコンを表示させる方法では 英数字のユニコード を使用します。
このように 見出しにアイコンを付ける設定のしかたについては こちらでまとめています。
【 WordPress 】見出しをラインやアイコンでカスタマイズしてみる
編集に役立つツール
気に入ったアイコンのコードを書き込んでおいたり編集作業には SublimeText がおススメ！
テキストエディタ【 SublimeText 】インストールと 日本語変換のしかた
また よく利用しそうなアイコンは 定型文登録に登録しておいたりすると便利です。
ルクセリタス【定型文登録】と IMEオプション【単語登録】で効率よく記事作成する方法