Font Awesomeでアイコンフォントを使う

アイコンフォントというのはWebページ上に文字と同じような感覚でアイコンを表示できる形式です。フォントと同じようにサイズや色の設定もCSSで装飾可能です。Font Awesomeはそんなアイコンフォントを表示させるためのサービスです。

Font Awesomeへのユーザー登録

以下のWebページに行きましょう。白いボタンの「Start for Free」をクリックします。

https://fontawesome.com/

 

ユーザー登録のためにメールアドレスを入力して「Send Kit Code」ボタンをクリックします。

 

 

メールに送られてきたリンクをクリックすると以下の画面が現れます。パスワードを設定して「Set Password & Continue」ボタンをクリックします。

 

以下の画面に切り替わったら登録完了です。

 

アイコンフォントの設置方法

上の画面の「① Add YOur Kit Code to a Project」欄のタグをコピーします。このタグをHTMLファイルの<hrad>タグ内に貼り付けましょう。

 

次に検索などで好きなアイコンを探して、下図赤矢印のタグをコピーします。これをアイコンを設置したい場所に貼り付ければOKです。

 

TwitterアイコンとFacebook、インスタグラムのアイコンを設置したいと思います。以下はコピーしたタグを下記並べただけです。

<ul>
  <i class="fa-brands fa-square-twitter"></i>
  <i class="fa-brands fa-facebook"></i>
  <i class="fa-brands fa-square-instagram"></i>
</ul>
 

 

かなり小さいアイコンになりましたが、以下のように表示できました。

アイコンのサイズを変える

アイコンサイズを変えるCSSが用意されていて、以下のような種類があります。詳しくは以下のリンクから参照ください。

https://fontawesome.com/docs/web/style/size

 

以下の例はfa-3xを使った例です。

<ul>
  <i class="fa-brands fa-square-twitter fa-3x"></i>
  <i class="fa-brands fa-facebook fa-3x"></i>
  <i class="fa-brands fa-square-instagram fa-3x"></i>
</ul>
 

アイコンの色を変える

文字のような振る舞いをしてくれるのでCSSで色を変えることができます。

<ul>
  <i class="red fa-brands fa-square-twitter fa-3x"></i>
  <i class="red fa-brands fa-facebook fa-3x"></i>
  <i class="red fa-brands fa-square-instagram fa-3x"></i>
</ul>
  

 

.red{
  color: #f00;
}

 - HTML/JavaScript