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、便利ですね。
どなたかの参考になれば幸いです。