fontawesomeのアイコンを正しく読み込む方法

Tweet

Pocket

fontawesomeのアイコンを正しく読み込むには、以下のようにcssで読み込むと、AMP的に、モバイルファースト的に問題があるようです。

@import url(//cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css);

ref: AMPページでCDN経由でFont-Awesomeを読み込むときはホワイトリストに気を付けて！

なので以下のページでメールアドレスを入力して「Create & Use This Kit」ボタンを押し、申請します。

https://fontawesome.com/start

以下のようなソースが配布されるので、headタグ内に読み込みます。

<script src=”https://kit.fontawesome.com/xxxxxxx.js” crossorigin=”anonymous”></script>
* xxxxxxxはID