Font Awesome 5以降のバージョンでWebフォントを使用する方法 #CSS

概要

Font Awesomeを<i class="fa fa-hoge"><i>のようなクラス指定以外での方法で使用する方法について調べたので、
備忘録としてこちらにまとめます。

クラス指定以外での使用方法では、CSS3（またはSCSS）の擬似要素::afterまたはbeforeを用います。

擬似要素を用いてFont Awesomeを使う

まず、Webページ上でFont AwesomeのCSSを読み込ませます。

Rails等でFontAwesomeのGemを導入する手順を実行済みの場合は下記の手順は不要です

FontAwesomeを使用したページのhead内に記述する

<head>
  <title>FontAwesome5の使い方</title>
  <!-- 使用するFontAwesomeのバージョンに合わせ、"release/v5.○.○"/cssの数値を変えてください -->
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  <!-- 以下省略 -->
</head>

これでFont Awesomeが使えるようになりましたので、

サンプルとして、下記のHTMLに擬似クラスでFontAwesomeを使用してみましょう。

サンプルのHTML

<body>
  <p class="sample">サンプルテキスト</p>
</body>

適当なCSSファイル内に記述。sampleクラスのpタグ内に、擬似クラスでFontAwesomeのアイコンを表示させる

p.sample::after {
  content: "\f304"
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

これで、サンプルテキストの文字列直後にペンのFontAwesomeアイコンが表示されるようになるはずです。

その際のポイントは下記の通り。

::after（またはbefore)で対象の要素内を指定する
content: "\f○○○"で使いたいアイコンを指定する（アイコンコードはFontAwesome公式サイト参照
- その際、"\（バックスラッシュ）"をコードの先頭につけること
font-familyで"Font Awesome 5 Free"（有料版はFreeではなくPro、BrandsならBrands）と記述
- ※FontAwesomeのバージョンが５になる以前はfont-family: FontAwesome;の指定だけでOKでした
font-weightでアイコンの種類（solidかregularなど）を指定

また、font-weightで指定するアイコンの種類の数値はこちら

font-weight: 900; <= Solid
font-weight: 400; <= Regular
font-weight: 400; <= Brands
font-weight: 300; <= Light (Pro)

アイコンではなく四角い枠が表示されてしまう場合

FontAwesomeのCSSかfont-familyまたはアイコンコードの指定が間違っている可能性が考えられます。

記事の内容に間違いがございましたら、コメントの方にてご報告いただけると幸いです