[図解]Webアイコンフォント Font Awesome 5を設定(2020年5月版)

別タグで開くリンクにこういう→アイコンを付けたい!

実際に、このアイコンを表示する方法は、こちらです。

関連記事

前回は、WordpressでFont Awesome5を使えるように設定をしました。 [sitecard subtitle=関連記事 url=https://lazylazylazy.com/setting_font_awesome5[…]

ということで、今回はWebアイコンフォントのFont Awesome 5をWordpressに設定します。

このblogはWordPressのテーマにThe Thor(ザ・トール)を使っています。
ですから、The ThorにFont Awesomeを設定する方法となりますが、他のテーマの場合でも参考になると思います。

Font Awesomeとは?

Font Awesomeは、無料および有料でつかえるWebフォントのサービスで、設定すると多数のアイコンを使用できるようになります。

現在のバージョンは、Version 5.13.0です。(2020/05/26現在)

プランとしては、無料のFreeプラン、有料のProプランがあり、Freeプランでは1,588個、Proプランでは7,842個のアイコンを使うことができます。

ProプランのStandardは、年間99ドルです。

通常はFreeプランで十分と思います。

Font Awesome 5の設定

Font Awesomeへの登録

まずは、Font Awesomeのホームページを開いて、【Start for Free】をクリックします。

 

次に自分のメールアドレスを入力して、【Send Kit Code】をクリックします。

Font Awesomeから「Confirm Your Font Awesome Account Email Address」というタイトルのメールが届きます。
メールを開き、【Click to Confirm Your Email Address + Set Things Up】をクリックします。

新しい画面が開いて、パスワードを設定するように求められるので、パスワードを2回入力して【Set Password & Continue →】をクリックします。

次は、名前などの設定です。
上から順に、名・姓・Font Awesomeを始めて使用した時期・お気に入りのアイコンを入力して、【All set. Let’s go! →】をクリックします。
お気に入りのアイコンは、空欄でも大丈夫です。

これで、Awesome Fontへの登録は完了です。

WordPressへFont Awesome5を設定

登録が完了すると、組み込み用のソースの画面が表示されます。

【Copy Kit Code】をクリックして、追加ソースをクリップボードにコピーします。

このコピーしたソースを<head></head>内に出力するようにすれば、設定は完了です。

The Thorでの設定

WordPressの設定画面を開き、外観の【カスタマイズ】をクリックします。

 

【基本設定[THE]】をクリックします。

 

【高度な設定】をクリックします。

</head>直上の自由入力エリアにさきほどクリックボードに保存したソースを張り付けて、【公開】をクリックします。

これで、設定は完了です。

のはずが、「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」とのエラーがでました。

「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」エラーの解消方法

調べたところこのエラーが出るのは、WAFがオンになっているためでした。

WAF(Web Application Firewall)は、Wordpressのサーバーの設定で、Webアプリケーションの脆弱性を突いた攻撃からWebサイトを守る機能です。

上記の設定をするときだけ、WAFをオフにすると【公開】をクリックしてもエラーは出ませんでした。

その後、WAFはオンに変更しておきます。

これで設定は完了です。

設定が完了すると、こんな風にアイコンを表示できるようになります。

次回は、別タブで開くリンクに自動的にアイコンを付ける設定を行います。

関連記事

前回は、WordpressでFont Awesome5を使えるように設定をしました。 [sitecard subtitle=関連記事 url=https://lazylazylazy.com/setting_font_awesome5[…]

最新情報をチェックしよう!