PHPを学んでからローカル環境で少しずつブログのデザインを変えています。
自粛期間中にWordPressで自由にカスタマイズできるようになりたいと思って、勉強を始めてみました。 WordPressを使っている人ならご存じのとおり、より自由にカスタマイズするならPHPは必要不可欠です。 勉強をす …
そのときにアイコンを入れたいと思ってCSSにFontAwesomeのコードを書いたら、コードがそのまま表示される不具合が発生しました。
FontAwesomeが表示されない代表例といったら□（四角）がされてしまうことですが、コードが表示されてしまうのは初めてことでした。
この問題の解決法を解説します。
【結論】バックスラッシュを付けていない
タイトルにもあるとおり結論から先にお伝えすると、表示させたいFontAwesomeのコードの前に”\“バックスラッシュを付け忘れていたのが原因でした。
FontAwesomeを使う際には、表示させたいセレクタに対して以下のようなコードを書きます。
h2:before { /*アイコンを表示させたい箇所の指定*/
font-family: "Font Awesome 5 Free";
content: "\f08d"; /*アイコンの種類を変更する箇所*/
font-weight: 900;
}
このような感じでCSSを書けば、とりあえず表示はされます。
h2:before { /*アイコンを表示させたい箇所の指定*/
font-family: "Font Awesome 5 Free";
content: "¥f08d"; /*"\"バックスラッシュが￥になっている*/
font-weight: 900;
}
このとき、僕がやっていたミスが上のコードのように“\“バックスラッシュが\になっていました。
英語配列のキーボードを使っている場合、”¥”と”\“が同じ位置なので、つい間違ってしまったみたいです(^0^;)
FontAwesomeで四角（□）いがいの表示エラーが出たので、何か大きなミスをしたのかと思っていたのですが、いがいと小さなミスでした。
FontAwesomeで表示エラーが出たときに見直した箇所
コードの間違いに気づくまでに見直した箇所もあわせて書いておきます。
FontAwesomeの表示エラーが出た際に試してみてください。
CDNコードを古いのを記述している。もしくは記述されていない
おそらくFontAwesomeを使う場合CDNを使っていると思います。
このCDNコードはたびたびバージョンアップされていまして、新しいアイコンを使う際に古いCDNコードを使っていると表示されません。
その場合、FontAwesomeのサイトから新たにCDNコードを取得して記述しなおす必要があります。
記述する箇所は<head>~</head>の中になります。
WordPressのテーマによっては【埋め込みコードの設定】の【<~head>直前に挿入するコード記入欄】といった箇所があるので、そちらに記入すると便利です。
もともとheader.phpに記述していた人は2重で記述しないように気をつけてください。
Pro版のアイコンを使おうとしている
FontAwesomeのアイコンには無料版とPro版の2種類があります。
アイコンを選んでいる際に､うっかりFreeのフィルタリングにチェックを入れ忘れることがあります。
Freeアイコン一覧からアイコンを選びなおすか、検索欄に使いたいアイコンのコードで検索することで、無料のアイコンかを調べることができます。
フォント指定でFreeをつけ忘れている
フォントファミリーを指定する際のFont Awesome 5の後ろにFreeをつける必要があります。
font-family: “Font Awesome 5 Free“;
Pro版にはfont-family: “Font Awesome 5 Pro“;
と後ろをProに変更する必要があります。
ひさしぶりに使ったりすると忘れがちな部分なので気をつけましょう。
font-weightの指定を間違えている
FontAwesomeはfont-weightの指定が必要です。
無料版では”font-weight: 900;”と”font-weight: 400;”の2種類しか指定できないので確認してみてください。
おわりに
FontAwesomeって使い慣れていないとエラーが表示されて難しく感じられるかと思いますが、ひとつずつ原因を調べてみるとケアレスミスである場合がほとんどです。
ひとつずつ確認してみましょう。
