Bloggerブログ|simplify2|fontawesome5のアイコンを使うためにCDNを変更

fontawesome アイコン

投稿2019年5月15日 更新

 テンプレートsimplify2では初めからfontawesomeのアイコンが使われていますが、そのCDNのバージョンはfontawesome4.6.0と今となっては古いものになっています。
 fontawesomeの公式ページで紹介されているアイコンはfontawesome5が主流となっており、fontawesome4のままでは何かと使い勝手が悪いのでfontawesome5のアイコンが表示できるように変更してみました。
 このページではfontawesomeのCDNを変更する方法について取り上げています。

もくじ

CDNが設定されている場所の確認


 検索窓に「font-awesome」と入力すると以下の赤線を引いたコードが表示されるので、

この()内の
"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"

を最新のCDNに変更します。
 CDNは公式ページで確認するのがおすすめですが、そこで紹介されているコードをそのまま張り付けてもうまくいかないのでその点を次項で説明します。
 ちなみにCDNとは、簡単に言ってしまえばfontawesomeのアイコンを利用するためのリンクのことです。

公式ページでCDNをコピーする


 続いて最新のCDNをfontawesomeのサイトで確認します。
リンク先に表示されているコードのうち、以下の画像の「反転させたところだけ」をコピーして、先ほど確認したところに貼り付けます。

 コードの端にあるダブルクオテーションマーク「" "」の扱いには注意してください。
 ※以下のコードは2019年5月現在で最新のものです。
"https://use.fontawesome.com/releases/v5.8.2/css/all.css"


初めに確認した場所に貼り付ける


"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"

と書かれているところに公式ページでコピーしたコードを貼り付けます。



 最後に「テーマの保存」をクリックするのをお忘れなく。

 これでCDNの変更は完了ですが、fontawesome4と5ではアイコンの記述方法が違うので、CDNを変更したことによってそれまで表示されていたアイコンが非表示になってしまったはずです。
 次回は4と5の表記の違いを確認し、再びアイコンが表示されるようにしてみます。
 fontawesoem4のCDNを変更した際に非表示になったアイコンを再表示する方法

QooQ