黒木ノ水岩

黒木ノ水岩

自分の経験や実体験を元に、商品紹介や様々なHowTo等を紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

【はてなブログ】Font Awesomeでアイコンが上手く表示されないときの対処法!

このブログでも各所に「Font Awesomeを使用していますが、何故か表示が□になってしまい、上手く表示できない事が多々ありました。

その原因をようやく突き止めたので、対処法をご紹介します。

 

ちなみに、ここでは最新バージョンの「Font Awesome 5」の無料版を使用している事を前提に記載しております。

また、おおよそ原因のコードが判明している場合は、目次の「HTML、CSSのコードを修正する」までジャンプして下さい。

 

Font Awesomeが上手く表示されないときの対処法

大きく3つのステップを踏んで修正していきます。

  1. 自分のブログで使用しているFont Awesomeのバージョンを確認する
  2. HTMLやCSSを見て、上手く表示できていないコードを特定する
  3. HTML、CSSのコードを修正する

 

使用しているFont Awesomeバージョンの確認

ダッシュボード」→「設定」→「詳細設定」→「検索エンジン最適化」の欄にある「headに要素を追加」に記載されているコードを確認します。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

上記のようなコードが書かれているかと思いますが、この「https://〜/v5.0.6/〜」の部分を見て「vX.X.X」が最新のバージョンで書かれているか確認して下さい。

なお、現在の最新バージョンがいくつなのかは、下記のページで確認できます。

https://fontawesome.com/start

 

最新バージョンになっていなかった場合、先程のURLの「vX.X.X」の部分を最新バージョンの数字に修正してください。

 

上手く表示できていないコードを特定する

ご自身のブログのHTMLやデザインCSSソースコードを確認し、Font Awesomeのアイコンを使用しているコードを特定します。

おそらく、HTMLでは<i class="フォントのコード">〜</i>という形で、CSSではfont-family: 〜;とその近くにあるcontent: 〜;の形で書かれていると思います。

これらをたよりに、不具合が起こっているコードの場所を特定して下さい。

 

HTML、CSSのコードを修正する

HTMLとCSSで、それぞれ修正のやり方が異なるので、ご自身のパターンに該当する方の修正方法を参照下さい。

 

【HTMLの場合】

 下記のページから再度アイコンを検索し、<i class="フォントのコード">〜</i>の部分を最新バージョンのフォントのコードに修正して下さい。

fontawesome.com

 

CSSの場合】 

特定したコードの「font-family」の記載がfont-family: Font Awesome;となっていたら、font-family: "Font Awesome 5 Free";に修正して下さい。

また、すぐ近くにある「content」の「\フォントのUnicode」のUnicodeも念のため最新バージョンのコードから変更がないか確認しましょう。

確認方法は、HTMLの場合と同様に公式ページからアイコンを検索して下さい。

!Caution!

上記の方法でも上手く表示できない場合、「font-family」プロパティが入っているセレクタ内に「font-weight: bold;」を追加してみて下さい。

 

(例).samlple {

   〜
   font-family: "Font Awesone 5 Free";
   font-weight: bold;
   〜
   }

 

Font Awesomeが上手く表示されない原因

表示が□になってしまう原因は、主に以下の2つでした。

  1. 参照しているバージョンに対応した書式でコードが記載されていない
  2. font-weightを指定していない

①の原因は、HTMLで記載するときもCSSで記載するときも関わってくるものです。

②の原因は、CSSで記載するときに関わってくるものです。

 

バージョンに対応した書式でコードをが記載されていない

2017年末頃にアップデートが加えられ、これに伴いアイコンを表示するためのコードが変更になったようです。

そのため、2018年現在で最新の「Font Awesome 5」を使用するためには、このバージョンに合わせた形でコードを書いてやる必要があります。

 

もし、ご自身のブログが5よりも前のバージョンを使用していれば特に問題はありませんが、最新のバージョン5を使用している場合は、旧書式でコードが書かれていると上手く表示されない場合があります。

上記の対処法に書いてあるとおり、HTMLの場合はフォントコードが変更になっていたり、CSSの場合はfont-familyの書き方が変更されています。

 

font-weightを指定していない

最新のバージョン5の無料版を使用している場合、「font-weight」を「bold」または「900」で指定してやる必要があるようです。

これに気づかなかったため、何で表示されないのかずーっと悩んでました;;

参考サイト様には本当に感謝です><

 

参考サイト様

今回、参考にさせて頂いたサイト様はこちらです。感謝!

saruwakakun.com

plife.studio