webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
Font Awesome 5 のアイコンがiPhoneなど環境によって表示されない!問題回避策(+疑似要素アイコン) eyecatch画像

Font Awesome 5 のアイコンがiPhoneなど環境によって表示されない!問題回避策(+疑似要素アイコン)

rss
Font AwesomeがFont Awesome 5にバージョンアップしてだいぶ経つので、最近は最新バージョンの5系を入れるようにしています。
ところが、これまで4系でうまく表示できていたアイコンが、環境によって表示されないエラーに見舞われました。

今回は スマホ iPhoneでFont Awesome 5 のアイコンが表示されない(反映されない)エラーです。
デスクトップやタブレットの実機でテストすると表示されているのに、 iPhoneでは表示されません
手元に実機がない他のデバイスでも、もしかしたら表示エラーとなっている可能性があります。


 

結局表示できなかった解決策


まず、当初のコーディングは、公式Font Awesomeのサイトを参考に、
<HTML側> index.html
<head>
    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
</head>

Font Awesome5の最新版を外部参照で、公式タグの通りに<head>内に記述しました。
Font Awesome最新版を参照)

疑似要素にはCSS側で 「font-weight」の設定を「bold」にが必要との情報を参考に、下記のようにCSSコーディングしてみたのですが、、、
<CSS側> css/main.css
.sample:before {
    font-family: "Font Awesome 5 Free";
    content: '\f0c9';
    font-weight: 900; /* あるいは font-weight: bold; これがないと表示されないとの情報より*/
}


それでも 表示されませんでした。
疑似要素のユニコード形式だけでなく、<i class="fas fa-bars"></i>等のタグも、同じく表示されないエラー。。。




 

表示できた解決策!


色々試行錯誤した結果、
HTML側、 <head>での「Font Awesome」CSSの外部参照リンクを外し
<HTML側> index.html
<head>
    <!-- 外す! <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="css/main.css">
</head>


上記の外部リンクCSS側(css/main.css) CSSファイルの冒頭で、
<CSS側> css/main.css
@import url(//use.fontawesome.com/releases/v5.0.11/css/all.css);

とインポートしてようやく、上手く表示されました!

動作の仕組みは分かっていませんが、
もし同じ件でハマってしまうと、iPhoneのデバッグは面倒くさい(特にWindows)ので、一度お試しあれ、です。

 

 まとめ

  • まずは「最新版のFont Awesome」を外部参照しているかチェック 
  • 疑似要素アイコンにはCSS側で 「font-weight」の設定を「bold」に 
  • それでもダメな場合は、HTMLの<head>でのFont Awesome外部参照を外し、CSSファイル冒頭でインポート!  


 
ページの先頭へ

rss