リアルコマース スタッフブログ

Real Commerce株式会社スタッフブログ

CLOSE

Font Awesomeを疑似要素でユニコードを利用するときの注意点

Font Awesome5は便利だけどしんどい

なにかと便利なFontAwesome.ioですが、version5になってからかなり使いづらい。
普通に<i fa fa-….></i>とiタグで呼び出す分には何ら問題は無いのだが、beforeやafterなど疑似要素のcontentとして扱う場合にはこれまでと若干違うのでめんどくさい。

 

基本的な使い方

基本的な使い方はこれまでと一緒。だけどfont-familyの設定だけが違うので注意

.hoge:before {
  content:"\f007";
  font-family: "Font Awesome 5 Free";
  margin-right: 5px;
}

無料版しか利用したことが無いのがとても残念だが、おそらく有償版ではfont-familyの書き方が異なってくる。
またcontent部分の文字コードはこちらのチートシートを使った方が早いかもしれない。

Font Awesomeチートコード
https://fontawesome.com/cheatsheet?from=io

ただ、正しく上記のようにcssで呼び出していても、正しく表示されない場合があることに注意!

font-weightを指定しないと呼び出せない場合

先程も触れたように、FontAwesomeには無料版と有料の物があります。
例えばよく使う「>」記号、このユニコードは「f105」なんですが、これを基本的な使い方にならいcontent:”\f105″;と書いてしまっては表示されません。
この「f105」は有料版と無料版の両方に提供されており、無料版ではfont-weight:boldしか提供されていません。
なので、次のようなスタイルになります。

hoge:before {
  content:"\f518";
  font-family: "Font Awesome 5 Free";
  margin-right: 5px;
  font-weight: bold;
}

この記事をシェアする