PR ワードプレス

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

トレンディです。

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

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

解決策は

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

です。

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

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

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

 

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

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

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

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

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

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

解決策

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

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

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

ポイント

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

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

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

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

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

続きを見る

\初心者向け/

ブログの始め方へもどる

アフィリエイト収益化のやり方をロードマップで完全解説!

  • この記事を書いた人
プロフィールアバター

トレンディ

Web業界10年目・40代になってから独立しフリーランスデザイナー&ブロガーとして生きています。何度も挫折しながらブログを続けているWebデザイナーです。新たな気づき・反省点をメインに共有していきます。会社員時代に30万PVを超えるメディアを運営していましたが、今は当時のSEO手法は通じません。人生は山あり谷ありです。ブログも良いことよりつらいことのほうが多い。 だからこそ、楽しみながら続ける工夫が大事。

-ワードプレス