Font Awesome 5 Free を疑似要素で使う方法と高速化のヒント | Analog Studio

2018/11/20 2018/12/09 概要 SNS のアイコンなどを文字のように色を変えたり劣化させずに拡大縮小したい時に役に立つものにアイコンフォントがあります。 アイコンフォントは、ここ数年の SNS の浸透で特に浸透してきたように思います。 そんなアイコンフォントの中でも無料で使えて種類が非常に豊富な「Font Awesome 5」(Free 版) について解説します。 基本的な使い方は既に色々な情報がありますので、ここでは疑似要素での使用方法と CSS 読み込みの高速化をハックしていきましょう。 基本的な使い方と導入方法 「Font Awesome 5」を使用するには CDN から読み込むかフォントデータ等をダウンロードして使用する2つの方法があります。 また、SVG を使った方法もありますが疑似要素で高速化まで考えた時には実装が大変そうなのでフォントデータを読み込む方法のみ