【css】Font Awesomeのアイコンを:beforeとか:afterの擬似要素に指定する

ウェブ制作技術

この記事はこんな人に向けて書いています

  • Webデザイナー
  • コーダー/マークアップエンジニア

おはようございます、ヒグチです。

アントニオ

簡単なHTMLでアイコンフォントをレンダリングしてくれるWebサービス、Font Awesome。とても便利ですよね。

Font Awesome

Font Awesome

Font Awesomeは、アイコンを選んで、表示された<i>タグをHTMLに書くだけで使えます。

お手軽です。

font_awesomeのコード

font_awesomeのコード

でもたまに、CSSで指定したいときがあります。

たとえば:beforeや:afterの擬似要素に指定して、テキストの前後にアイコンをくっつけたい場合などですね。

でも、擬似要素のcontentプロパティにはHTMLを指定できません。

下記はNGです。

ではどうするかというと、

こうします。

まずfont-familyにFontAwesomeと指定します。

そしてcontentには、「Unicode」を入れます。(ここでは「f293」)

「Unicode」はどこで確認できるかというと、FontAwesomeの各アイコンページで確認できます。

FontAwesomeのUnicode

Unicodeの前に「\」というのがありますが、Unicodeを書くときの決まりごとです。

表示は環境に依存するので、¥マークになったり逆スラッシュになったりします。

また、Unicodeは、ダウンロードした「font-awesome.css」でも確認できます。


Font Awesomeでアイコンフォントを効率的に使いこなせば、表現の幅もぐっと広がります。

CSSでの記述以外にも、このページで、いろいろなサンプルが紹介されているので、見てみてください。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。