エンジニアが学んだことをお伝えします

2018-06-06 Blog

Font Awesomeでエラー発生。Font Awesome 5に対応することでとりあえず解決?

Font Awesomeはオシャレなマークを使えるので、当ブログでも重宝している。

具体的には、以下の3箇所に使用

こんな感じ。

 

ところが今日自分のブログを確認していたときに、以下のような表示エラーが発生していた。

 

なんと□にバッテンとなっている。

ガーン。

特に何をいじくったつもりもないのだが、これは困る。

原因不明

調査したが理由は不明のまま。

safariの開発ツールを使ってわかったことは、Font Awesomeを読み込みにいっているところでエラーになっていると思われること。

「リソースを読み込み中にエラーが起きました。」

しかしその根本原因が判らない。

Font Awesomeの公式サイトを除くと、Font Awesome 4からFont Awesome 5にグレードが変更されていた。(ただし最近ではない模様)

これだ、と思い、僕は原因調査を諦めてとにかく最新版を使用することにした。

具体的な対応方法

以下の公式サイトを参考に、Web Fonts With CSSで対応する。

https://fontawesome.com/get-started/web-fonts-with-css

 

1.Font Awesomeの読み込みコード変更@header.php or footer.php

まず通例header.phpの<head>内に置く(僕はfooter.phpのbody近くにおいているが)Font Awesomeを読み込むコードを最新版に変更。

変更前:
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet">

変更後
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

 

2.CSS font-family変更

続いて、CSS上のフォントファミリーの指定コードを変更

変更前
font-family: FontAwesome;

変更後
font-family: 'Font Awesome\ 5 Free';

 

初期対応による結果、とりあえずある程度戻った。

ところが、”Less is More”と”Mac/iPhone/iPad”と”View”の表示が戻らない。

これも調べても原因が判らない。

諦めて以下のサイトから調べ直し、CSSを書き直した。

https://fontawesome.com/icons?d=gallery

Appleのリンゴマークだけはなんともできなかったので、諦めてiPhoneのマークにした。

最終結果

とりあえずそれらしい形には戻った。

同様の対応を検索ボックスの虫眼鏡にも、引用マークにも行っている。

Appleマークだけは悔しいので、引き続き原因追求を行いたい。

誰か詳しい人教えてください。素人にはこれが限界でした。。。

HOME

RELATED POST

   

NEW POSTS

CATEGORY


Follow @Yo_MechEngineer

© Yo 2017