読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

CSSのcontent属性からFont Awesomeを適用する

WebDev HTML&CSS

 なんども忘れてしまうので、書き残しておく。似たようなブログ記事なら掃いて捨てるほどあるけれど。
 ポイントは、font-familyに"FontAwesome"という値を適用して、contentには、Font Awesomeのユニコードの値を指定する。この際に、fの前にバックスラッシュを置く(Windowsだったら円記号かも)。
 アイコンのクラス名は、Font Awesomeのアイコン一覧で確かめられるけれど、ユニコードはアイコン詳細ページに入らないと確認できないので注意。チートシートからは、両方ともに確認できるけれど、 というような表記をそのままコピペするとちゃんと表示されないので、重ねて注意。

.entry-title:before {
    font-family: "FontAwesome";
    content : "\f105";
    padding-right: 12px;
}


html - Use font awesome icon as css content - Stack Overflow
 縦を揃えることが問題になりやすいが、ここでは触れない。上のリンクには解説がある。