HTMLでアイコンを設定する方法を解説！
HTMLでアイコンを設定する方法を解説します。HTMLでアイコンを用いることで目立たせ、ユーザーを惹きつけることができます。ここでは主にFontAwesomeというツールを用いたアイコンを設定する方法について紹介します。
HTMLで設定できるアイコンの種類
HTMLでアイコンを表示させてユーザーを惹きつけたいと思うことがあります。
ここでは主にFontAwesomeというツールを用いて紹介します。
FontAwesomeでは無料でとても多くのアイコンを設定することが出来ます。詳しくは以下のFontAwesomeの公式サイトでどれくらい多くのアイコンを設定することが出来るのか確かめてみてください。
HTMLでアイコンを設定する方法
それではFontAwesomeを用いてアイコンを表示させる方法について解説します。
まずFontAwesomeを使うためにはいくつかやり方がありますが、すぐに試すことが出来るCDNを使ったやり方を解説します。
下記のコードをheadタグの中に埋め込みましょう。
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />これでFontAwesomeを使う準備は整いました。
後は公式ページでIconsから、自分が表示したいと思うアイコンを検索し、コードをコピーして使ってみてください。
ここでは例としてcheckアイコンを用いてみたいと思います。それではサンプルコードを用いて実際の挙動を見てみましょう。
このようにcheckアイコンが表示されていることが分かると思います。
アイコンの色を変えるには
FontAwesomeにあるアイコンのデフォルトの色は全て黒です。色を変えたいと思うことがあります。
そんな時はFontAwesomeでコピーしたコードのiタグの中にクラスを付与してあげます。
ここではcheck-redというクラスを付与して、CSSを用いてcheckアイコンの色を赤色で表示させたいと思います。
では実際にサンプルコードを用いて挙動を見てみましょう。
このようにcheckアイコンが赤色に変わっていることが分かります。
このようにFontAwesomeは文字通り、正体はフォント（WEBフォント）です。つまりテキスト系のCSSのプロパティが適用可能です。色を変えたい場合はcolorのプロパティを使いましょう。
アイコンの大きさを変えるには
アイコンの大きさを変える方法としてはHTMLのみで変える方法と、CSSを用いて変える方法の2パターンがあります。では順番に見ていきましょう。
HTMLのみ用いる場合
HTMLのみ用いてアイコンの大きさを変える場合、以下のコードをアイコンを表示させているコードに追加します。
例えば、<i class="fab fa-twitter-square fa-2x"></i>のような形です。
| コード | 大きさ |
| fa-xs | 0.75倍 |
| fa-lg | 1.33倍 |
| fa-2x | 2倍 |
| fa-3x | 3倍 |
| fa-4x | 5倍 |
| fa-5x | 7倍 |
それではtwitterアイコンを例にそれぞれの大きさがどれくらいのものなのか、順番にサンプルコードを用いて見てみましょう。
それぞれこのような大きさとなります。ここでデフォルトだととても小さいことが分かります。
なので適宜調整が必要です。
CSSを用いる場合
CSSを用いる場合には色を変えたときと同じようにiタグにクラスを追加します。ここではtwitter-sizeというクラスを追加します。
そしてその要素にfont-sizeを指定するのみです。
ではサンプルコードを用いてデフォルトのサイズとCSSで大きさを変えたものを見比べてみましょう。
このように大きさが変わっていることが分かります。このようにFontAwesomeの正体はフォントのため、font-sizeのプロパティが効ききます。
まとめ
いかがでしたでしょうか？
他にもCSSを用いるとアイコンに対して色んなアレンジを加えることができ、ユーザーを惹きつけることができます。
ぜひFontAwesomeを用いてアイコンを作ったWEBページに表示させてみてください。
