Font Awesomeって便利ですよね。最近WordPressを始めたばかりなのですが、アイコンの存在は不可欠だと思ったので、是非とも使いたかったツールです。
最終的には使えたのですが、メニューや投稿の中でどうやって使うのか少し苦戦したので、同じように悩まれている方がこれ以上出ない為に使い方を書こうと思います！
ちなみに筆者の環境ですが、以下のバージョンとテーマを利用しています。(執筆時)
そんなわけで早速 外観→メニュー と進んでいき、以下のようにナビゲーションラベルに書いてみます
<i class="fas fa-home"></i>
「これで晴れて表示だ〜〜！」と思ったのですが、画面を見ると謎の□の表示が、、
調べてみると、ヘッダーでFont Awesomeを読み込ませなければならないようで(当たり前)、それをしていなかったためにタグだけ書いても何も起きずに□が出てしまいました。
ということで、Font Awesomeを追加してみましょう。今回はCDNという方法で使用することにします。
追加方法は簡単で、外観→テーマエディター と進んでいただき、tmp-user → head-insert.phpを選択した後、以下linkタグを画像のように追加すればOKです！(バージョンは最新のものだと変わっているかもしれません)
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
これで再度メニューを見てみると…ちゃんと家のアイコンが表示されました…！
これに続いて投稿の中にもアイコンを入れてみようと思ったのですが、少々手こずりました、、
実は投稿する際のエディターモードがビジュアルエディターだとダメで、コードエディターじゃないと埋め込めないという罠に引っかかっておりました(これはわからないよ〜)
ビジュアルエディターで普通にタグをかくと、実際には制御文字をエスケープしてしまうようで、アイコンのタグとして認識されていませんでした。実際にコードエディターモードで見てみると、「< >」の記号が別の文字列に置き換えられていました。そのため、投稿にFont Awesomeなどのアイコンを使う際はコードエディターで挿入しましょう！(大事なことなので2回言いました)
まとめ
アイコン1つ使うのに少々てこづってしまいましたが、1度使えるようにしておくとその後のメリットが大きいので是非とも使えるようにしておきましょう！
コメント