Wordpress

【解決】アフィンガー5(WING)でメニューのアイコンフォントが表示されない【WordPress】

2020年1月18日

トレンディです。

悩み
Wordpressテーマ「アフィンガー」でアイコンフォントが表示されない。□になる。

今回はこんな悩みについて、知見や経験をもとに記事を書いていきます。

解決策は

旧バージョンのアイコンフォントを使う

です。

アイコンフォントはあらゆるところで利用できる

アイコンフォントは、画像とは違い手軽にアイコンを設置できるとても便利な機能です。

目立たせたり、わかりやすくしたり、サイトの回遊率を上げたりと導入メリットはたくさんあります。

 

WordPressテーマ「アフィンガー」では、メニューや記事内で幅広くアイコンフォントを使用できるようになっています。

しかし、誤ってバージョンの異なるアイコンフォントのコードタグを使うと上手く表示されません。

公式ページにもバージョンの説明は載っているものの気づかない人もいるかと思い本記事を作成しました。

原因は最新バージョンのアイコンフォント

原因は、最新バージョンのアイコンフォントを使っているからです。

アイコンの代わりに□←このような四角のマークが表示されていれば、バージョンの問題。

解決策

下記の旧バージョンのページから目的のアイコンを選んでコードをコピペしましょう。

FontAwesome(アイコンフォントバージョン4)

最新バージョンも実装したところ使用はできますが、<head></head>のhtmlタグ間に最新バージョンの読み込みタグを設置する必要があります。

ポイント

WordPressテーマ「Affinger5(WING)」では、アイコンフォントバージョン4の利用が推奨

されていますので、初心者の方は安全な旧バージョンを利用しましょう。

AFFINGER5では最新のアイコンフォントは推奨されていませんが表示することは可能です。

参考記事導入方法はこちらの記事からどうぞ

関連記事【解決】アフィンガー5のSNSボタン、メニューアイコンが表示されない!【WordPress】

続きを見る

-Wordpress