Font Awesome基本の使いかた！ アイコンのサイズや色をHTMLコードで指定する

Font Awesomeアイコンは デフォルトでは文字サイズと同じ大きさ、色は黒。
といったシンプルなアイコンですので 使用する場面によってサイズや色を指定する必要があります。

投稿記事で使用する場合のサイズや色の指定をする方法についてまとめていきます。

基本のコードと記述の基本

Font Awesomeの設定で使用した feather を使って解説していきます。

アイコンのHTMLコード部分 <i class="fa-solid fa-feather"></i> を
コピーしたものを 投稿編集の テキストエディタ に記述していきます。

気を付けないといけないのは </i> の後に文字を入れないとコードは消えてしまいます。

相対的なアイコンと文字サイズ

通常のアイコンサイズは Webサイトで指定したフォントサイズになります。

アイコンのサイズを変更したい場合、先ほどのコードにサイズ指定のコードを追加しますが
文字のサイズとの比率が合わないなどという問題が起こることがあります。

サイズ指定する場合、アイコンコードの後ろに  fa-●● と記述します。

アイコンコードでのサイズ指定は 相対的なアイコンサイズ

つまり、文字は通常の記事に使用する文字のサイズで指定したサイズのままで
アイコンだけ大きさが変わるということになります。

サイズのコードに対しての 文字サイズはこのようになっています。

実際の大きさはこんな感じです。

こんなにアイコンが大きくなっても 文字は通常のままなのです。

アイコンと文字のサイズを揃える

文字とアイコンを同じくらいのサイズにする場合、div や span を使ってコード指定します。

図では どちらもアイコンサイズ 3em 指定でコードの前に文字を入れています。
feather 3em <div  or  span ~ といったコードです。

試しに アイコンの前に文字を入れてみましたが div では
アイコンと同じ列に文字を入れることができず１行上に表示される形となり、
余分なスペースも出来てしまっていました。

後に記述する文字（文章）は </i> と </●●>の間に記述します。

余分なスペースの調整

div を使った場合に アイコンの前の行との中途半端なスペースのは
前の文字（文章）の margin を調整することで改善することができます。

＊ アイコンの方で調整する場合、margin-top で調整することも可能です。

span と div の表示の違い – まとめ –

使用したい場所によって span と div を使い分けることができますが コードの記述のしかたに違いがあります。

それぞれに 記述を間違うとコードが消えてしまいアイコンが表示できないので注意が必要です。

色を変えてみる

次にサイズと色の両方の指定をしてみます。

今回のコードは <span> で色の指定、基本のコードにサイズ指定したものを組み合わせたコードです。

色は “dodgerblue" などといった カラーネームか ＃から始まるカラーコードで指定します。

＊カラーコードは WEB色見本 大辞典 が参考になります。

補足情報！

最後に Font Awesome の使いかたについて関連する記事をご紹介します。

CSSカスタマイズ

外観カスタマイズから 見出しやサイドバーなどで アイコンを表示させる方法では 英数字のユニコード を使用します。

このように 見出しにアイコンを付ける設定のしかたについては こちらでまとめています。
【 WordPress 】見出しをラインやアイコンでカスタマイズしてみる

編集に役立つツール

気に入ったアイコンのコードを書き込んでおいたり編集作業には SublimeText がおススメ！
テキストエディタ【 SublimeText 】インストールと 日本語変換のしかた

また よく利用しそうなアイコンは 定型文登録に登録しておいたりすると便利です。
ルクセリタス【定型文登録】と IMEオプション【単語登録】で効率よく記事作成する方法