Font Awesomeと疑似要素を合わせて使う

HTMLとCSSの話。Font Awesomeと疑似要素beforeやafterを合わせて使うと便利だったのでメモ。

Font Awesomeの使い方

Get started with Font Awesomeに載っている内容だが、以下のコードでスタイルシートを読み込むことができる。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

一番単純な使い方

公式サイトのiconsから使いたいアイコンを検索し、コードをコピーしてHTMLのBodyに貼り付ける。

<i class="fab fa-github-square"></i>

疑似要素と合わせて使う方法

公式サイトのiconsから使いたいアイコンを検索し、Unicodeをコピーしてくる。content部分にコピーしてきたUnicodeを書く。

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f183";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: bold;
}

一部のGlyphはfont-weight:bold;の指定が無いと動かない。
また、font-weight:bold;を指定しても動かないGlyphもあるので、そういうときはFont Awesomeをpng変換してくれるツールを使って画像にしてしまうのが良さそうだった。

追記

私が使用していたバージョン5.0.6にはバグがあり、一部のGlyphが動かないようなので、バージョンを5.0.10に上げたところ、問題なく動くようになった。

以下のリンクに最新版が置いてあった。

Use Font Awesome Free CDN

以上になります。

参考
Get started with Font Awesome
Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合