【AMP】Font Awesomeが表示されない?【備忘録】

2019年 8月 15日  2019年 8月 20日

【AMP】Font Awesomeが表示されない?【備忘録】

AMPでFont Awesomeを使うときにハマってしまったので、メモです。

Font Awesome5のJS認証やめてくれませんかね?

結論

Font Awesome4.7のCSSを読み込んでiのCSSを見直す。

headへの記載

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

iタグのスタイル

i {
    font-family: fontawesome;
    font-style: normal;
}

フォントの指定をして、デフォルトイタリックなiタグを矯正しています。

HTML側

<i class="fab fa-twitter" aria-hidden="true"></i>

背景と原因?

BulmaのFont Awesome機能を使ってコーディングしていました。

通常サイトを作るノリで、Font Awesome5を入れていたのですが、AMPチェックで弾かれてしまったんです。

理由はもちろん、AMPでは独自JSが制限されているから。

そこで、4系に切り替えました。

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

ところが、■が表示されてしまい、膝から崩れ落ちる状態に…

原因はフォントの指定ができていなかったからでした。