よくみるアイコンマークをWordPressで利用する~~~!!(タイトルママ)
汎用アイコンは「Font Awesome」が利用できます。無料です!👏👏
![](https://palette33.jp/wp/wp-content/uploads/2020/06/66c19942ab4ba346fdb64ccc04cde373.png)
こういうアイコンを入れる目標!!🙋♀️
英語ですが操作は難しくないです🤗
1️⃣メールアドレスを登録する
![](https://palette33.jp/wp/wp-content/uploads/2020/06/200613_01-1.jpg)
赤枠部分「Start for Free」をクリックしメールアドレスを登録します。
![](https://palette33.jp/wp/wp-content/uploads/2020/06/200613_02.png)
2️⃣専用コード発行
![](https://palette33.jp/wp/wp-content/uploads/2020/06/200613_03-1.jpg)
メールアドレスを登録すると専用コードが発行されるので、コピーして自分のサイトに貼り付けます。
貼り付け場所はページをスクロールしたところに載っています。
自分のサイトのhead内です。
![](https://palette33.jp/wp/wp-content/uploads/2020/06/200613_04-1.jpg)
WordPressのデフォルトテンプレート(Twenty Seventeen)なら「header.php」のhead内に貼り付けます。
そして同じくhead内にCDNも追加する必要があるみたいです!
公式のCSSなのですが、入れなくても動きましたがfont weightが反映されないので一部のアイコンが正しく表示されません(regularアイコン()がsolid()になる)。というわけで下記ページのCSS読み込みコードも追加します。
3️⃣表示させたい場所にアイコン用コードを追加する
後はテンプレートや記事ページの表示させたい場所に、アイコンのコードを書き加えるだけ!
下記リンクのアイコン一覧ページから使いたいアイコンを探してクリックすると、「i」から始まるコードが表示されるので、それをコピペして利用します。
アイコン一覧:https://fontawesome.com/icons?d=gallery
![](https://palette33.jp/wp/wp-content/uploads/2020/06/200613_05-1.jpg)
画像のような矢印アイコンを入れるときは、例えば
こちら <i class="fas fa-arrow-alt-circle-down"></i>と書くだけで「こちら 」と表示されます!
HTMLなので、WordPressの最新エディターなら「カスタムHTML」ブロックを使います。
あとは必要に応じてサイズやカラーをCSSで調整すれば完了~~~~✌️😊
One Reply to “よくある汎用アイコンをWordPressで利用する【Font Awesome】”