font awesomeを背景画像として使用する

公開日:2018年3月25日 2021年9月24日更新

Categoryweb制作

空の要素を書くのが好きじゃないので今まで使ったことが無かったfont awesome。
よくよく考えたら背景画像として書けるんじゃないかな…って思ったら案の定書けたのでメモ。

通常通り、head内にfont awesomeを読み込む記述。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

あとは見出しなりリストなり、背景画像として設定したい要素のcssを編集。
ありがちな、メニューの先頭にアイコンを付ける場合

li:before {
font-family:"fontAwesome";
content:"\f14a";
}

と、擬似クラスでやっちゃおう。
contentの値に、font awesome公式から任意のUnicodeを入力して表示させる。
この際、先頭に「\」を忘れないように。
色や大きさももちろん変更出来るので、これなら空のiタグにモヤモヤする必要無く使える。