●Font Awesomeが提供しているWebアイコンを使用しWordPressグローバルメニューにアイコンを加える手順を示します。2020/2/15時点(Version5.12.1)ではアイコンを無料で1,557種、有料で7,722種使うことができます。
導入手順
Ⅰ.設定
①ユーザー登録(Font Awesome)
fontawesome.comより”Start for Free”を選択
登録用メールアドレスを入力し”Send Kit Code”をクリック
Font Awesomeから届いたメールを開きパスワード登録を行う
⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
②htmlコード取得(Font Awesome)
ログインしYour Kidsよりhtmlコード(Kid Code)を取得する
③htmlコード貼付(Word Press)
WardPress内 外観→テーマエディター→”header.php”を選択しhead内に取得したhtmlコード（下記赤字）を貼り付ける
<head>
本文…
<script src=”https://kit.fontawesome.com/xxxxxxxxxx.js” crossorigin=”anonymous”></script>
</head>
本文…
<script src=”https://kit.fontawesome.com/xxxxxxxxxx.js” crossorigin=”anonymous”></script>
</head>
Ⅱ.使用方法
④使用アイコンのhtmlコード取得(Font Awesome)
fontawesome.com内”Icons”を選択し使用したいアイコンを選択する
htmlコードを取得する（青マークをクリック）
⑤ナビゲーションラベルにhtmlコード貼付(Word Press)
Word Press内 外観→メニュー ナビゲーションラベルにhtmlコードを貼り付ける
コメント