Font Awesome 5 アイコンフォント

このテーマでは、旧バージョンのFont Awesome 4 は標準装備されています。
最新のFont Awesome 5 を追加したい場合の方法です。
 

Font Awesome サイトへ

Font Awesome をクリックして下さい。下図のように表示されます。赤枠のマーク をクリックして文字列をコピーします。

 

header.php

子テーマの[header.php]の <head> 〜 </head> の間にコピーした文字列を追加します。図はfsvbasicの場合ですが マーカーの位置に入れました。

 
コピーした文字列:v5.8.2

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 
この作業でFont Awesome 5 アイコンフォントはもう使えます。
 

アイコンの使い方

先ほどの「Font Awesome サイト」の画像の一部です。
赤下線をクリックすると、全部のアイコンが表示されます。

 

でも実際に使えるのは無料のアイコンなので、下図のように Free をクリックすると無料アイコンだけが表示できます。
下にスクロールして「Load more icons…」で次ページです。

 

使いたいアイコンがみつかったらクリックすると、画像下のように表示されます。赤枠の文字列をクリックすると、コピーされます。

 

文字列を編集画面の本文にペーストすれば表示されます。

サンプルの記述:

<i class="fab fa-amazon fa-2x"></i>
<i class="fas fa-bell fa-3x"></i>
<span style="color: Dodgerblue;"><i class="fas fa-check-square"></i></span>
<span style="color: Mediumslateblue;"><i class="far fa-download"></i></span>

 

おまけ

「Font Awesome サイト」で使いたいアイコンが見つかったらクリックしてページを開いて、、、という作業が面倒なのでコピペ用の一覧表を作りました。別テーマですがよかったらどうぞ。
Font Awesome Freeアイコン表 v5.8.2