WordPress個別サポート

BizVektorやLightningでもサポートされているアイコンフォントの「Font Awesome」ですが、サイトからタグをコピーしてもアイコンが文字化けしてうまく表示されないことがあります。

試しにFont Awesomeのサイト「https://fontawesome.com/icons」から適当にアイコンを選んでみます。

使いたいアイコンを選択

使いたいアイコンを選択

表示されたページからアイコンのコード(iタグ)をコピーします。

アイコンのタグをコピー

アイコンのタグをコピー

コピーしたタグを編集画面にペーストします。

編集画面にタグをペースト

編集画面にタグをペースト

ページを表示すると、アイコンが文字化けしています。

アイコンが表示されない

アイコンが表示されない

これはFont Awesomeのバージョンの問題です。Font Awesomeのサイトではバージョン5のコードが表示されているので、サイト内でサポートされているFont Awesomeがバージョン4だとすれば、アイコンがうまく表示されない可能性があります。

単純な対策は上記のコードの「fas」を「fa」に変更してみることです。

「fas」を「fa」に変更

「fas」を「fa」に変更

「fas」の部分は「far」「fal」「fab」の場合もあります。

新旧バージョンの違いがそれだけなら、うまくアイコンが表示されます。

アイコンが表示されるようになる

アイコンが表示されるようになる

「fas」を修正してもうまくいかない場合、バージョン5のライブラリを読み込むようにサイト設定を変更するか、以下の旧バージョンのページからコードをコピーします。

https://fontawesome.com/v4.7.0/icons/

旧バージョンのコードをコピーすることができます。

旧バージョンのコードをコピーできる

旧バージョンのコードをコピーできる

この記事をSNSで共有する
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
トラブル解決でお急ぎのときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • ログインできなくなった
  • 画面が真っ白(500エラー)になった
  • 間違ってサイトを消してしまった
  • 引っ越し・SSL対応がうまくいかない
  • CSS・PHPのカスタマイズがうまくいかない
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク