ワードプレスグローバルメニュー 無料アイコン導入

wordpress Word Press
typographyimages / Pixabay

●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>

Ⅱ.使用方法

④使用アイコンのhtmlコード取得(Font Awesome)

fontawesome.com内”Icons”を選択し使用したいアイコンを選択する

htmlコードを取得する(青マークをクリック)

⑤ナビゲーションラベルにhtmlコード貼付(Word Press)

Word Press内 外観→メニュー ナビゲーションラベルにhtmlコードを貼り付ける

 

 

コメント

タイトルとURLをコピーしました