WordPressでFontAwesomeを追加する

FontAwesome logoIT

Font Awesomeって便利ですよね。最近WordPressを始めたばかりなのですが、アイコンの存在は不可欠だと思ったので、是非とも使いたかったツールです。

最終的には使えたのですが、メニューや投稿の中でどうやって使うのか少し苦戦したので、同じように悩まれている方がこれ以上出ない為に使い方を書こうと思います!

ちなみに筆者の環境ですが、以下のバージョンとテーマを利用しています。(執筆時)

筆者環境
  • WordPress: 5.2.4
  • Cocoon: 1.9.9.5.3
  • Cocoon Child: 1.0.8

そんなわけで早速 外観→メニュー と進んでいき、以下のようにナビゲーションラベルに書いてみます

<i class="fas fa-home"></i>
Cocoonテーマメニュー編集画面

「これで晴れて表示だ〜〜!」と思ったのですが、画面を見ると謎の□の表示が、、

iconが出ない、、

調べてみると、ヘッダーでFont Awesomeを読み込ませなければならないようで(当たり前)、それをしていなかったためにタグだけ書いても何も起きずに□が出てしまいました。

ということで、Font Awesomeを追加してみましょう。今回はCDNという方法で使用することにします。

CDNとは、コンテンツデリバリネットワーク(Content Delivery Network)の略で、世界中に張り巡らされた配信ネットワークを利用し、エンドユーザに最も近いPoP(配信拠点)から効率的かつ高速にWebを配信する仕組みのことを指します。

追加方法は簡単で、外観→テーマエディター と進んでいただき、tmp-user → head-insert.phpを選択した後、以下linkタグを画像のように追加すればOKです!(バージョンは最新のものだと変わっているかもしれません)

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
テーマファイルの一覧
テーマファイルの一覧
linkタグ挿入位置
linkタグ挿入位置

これで再度メニューを見てみると…ちゃんと家のアイコンが表示されました…!

home icon

これに続いて投稿の中にもアイコンを入れてみようと思ったのですが、少々手こずりました、、

実は投稿する際のエディターモードがビジュアルエディターだとダメで、コードエディターじゃないと埋め込めないという罠に引っかかっておりました(これはわからないよ〜)

ビジュアルエディターで普通にタグをかくと、実際には制御文字をエスケープしてしまうようで、アイコンのタグとして認識されていませんでした。実際にコードエディターモードで見てみると、「< >」の記号が別の文字列に置き換えられていました。そのため、投稿にFont Awesomeなどのアイコンを使う際はコードエディターで挿入しましょう!(大事なことなので2回言いました)

まとめ

アイコン1つ使うのに少々てこづってしまいましたが、1度使えるようにしておくとその後のメリットが大きいので是非とも使えるようにしておきましょう!

コメント

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