SublimeなLife日記

少しでも素晴らしい生活をおくるために、日々、気になったことを。

Font Awesome 5で擬似要素にアイコンを表示させるときのcssの指定方法

Font Awesome 5がリリースされた!

Font Awesome 5がリリースされました。
色々と新しくなっています。
くわしくは公式サイトなどにて色々と参照できますが、cssのcontentプロパティの指定方法がFont Awesome 5系から変更になったようです。

Font Awesome 5からcssの指定方法が変わった!

Font Awesome 4系までとはcssの疑似要素でのfont-familyの指定方法が変わっています。
ちょっと日本語のドキュメントや記事が見当たらなかったので、メモしておきます。

まず、html側にFont Awesome 5のcssを読み込みます。

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">

とりあえずリンクボタンのhtmlでも記述します。

<a>いいね</a>

次に、cssの記述です。

a:after {
  content: "\f164";
  font-family: 'Font Awesome\ 5 Free';
}

いいねアイコンが表示されましたか?
ぜひ当ブログを応援してください(^^)

アイコンが色々と増えたFont Awesome 5、便利ですね。
どなたかの参考になれば幸いです。

Font Awesome