Font Awesomeのアイコンが文字化けするとき
BizVektorやLightningでもサポートされているアイコンフォントの「Font Awesome」ですが、サイトからタグをコピーしてもアイコンが文字化けしてうまく表示されないことがあります。
試しにFont Awesomeのサイト「https://fontawesome.com/icons」から適当にアイコンを選んでみます。
![使いたいアイコンを選択](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-15-15-55-31.jpg)
表示されたページからアイコンのコード(iタグ)をコピーします。
![アイコンのタグをコピー](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-15-15-56-19.jpg)
コピーしたタグを編集画面にペーストします。
![編集画面にタグをペースト](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-15-15-57-10.jpg)
ページを表示すると、アイコンが文字化けしています。
![アイコンが表示されない](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-15-15-57-59.jpg)
これはFont Awesomeのバージョンの問題です。Font Awesomeのサイトではバージョン5のコードが表示されているので、サイト内でサポートされているFont Awesomeがバージョン4だとすれば、アイコンがうまく表示されない可能性があります。
単純な対策は上記のコードの「fas」を「fa」に変更してみることです。
![「fas」を「fa」に変更](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-15-16-11-20.jpg)
「fas」の部分は「far」「fal」「fab」の場合もあります。
新旧バージョンの違いがそれだけなら、うまくアイコンが表示されます。
![アイコンが表示されるようになる](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-15-16-13-23.jpg)
「fas」を修正してもうまくいかない場合、バージョン5のライブラリを読み込むようにサイト設定を変更するか、以下の旧バージョンのページからコードをコピーします。
https://fontawesome.com/v4.7.0/icons/
旧バージョンのコードをコピーすることができます。
![旧バージョンのコードをコピーできる](http://www.nishi2002.com/wp-content/uploads/2018/02/2018-02-15-19-09-50.jpg)