ひねもすのーたり

WEBデザイン勉強と健忘防止。テンションは常に低め。

Font AwesomeをCSSに記述したいときのあれこれ

Font Awesomeちょうべんり!

でもAwesomeがうまく発音できない。おーさむ?

とりあえず、フォントやっべっぞ(意訳)とても役に立つ。

今回、aタグの前に再生マーク(三角)をつけるため、:beforeのcontent内に指定をしたかったのですが、うまくいかなかったので調べて実践してみた。

尚、CDNやデータダウンロードなどで、FontAwesomeのデータは取得できる状態になっていることを前提にする。

Font AwesomeをCSSに適用するには

1.Font Awesome公式サイトへアクセス、iconの中から使いたいアイコンのページに進む

fontawesome.io

 

2.アイコンのイメージ真下にUnicodeが記載されているのでコピーする

f:id:rk8549:20170912122327p:plain

3.CSSにコピーしたUnicodeを貼り付ける、またUnicodeはコードの前に半角で「¥」マークをつけるのを忘れない。

※¥(半角)環境によっては斜線に変わるみたい。以下のように↓

f:id:rk8549:20170912122730p:plain

4.font-familyに'FontAwesome'を指定する。できた~

f:id:rk8549:20170912123752p:plain

aタグのbeforeにwebfont(FontAwesome)を指定したの図

参考にさせていただきました!

www.tam-tam.co.jp

cgsc.info