サイトアイコン IT NEWS

Font AwesomeをCSSの擬似要素のcontentで使用する方法

font-awesome-content

今やフォントアイコンの定番になった「Font Awesome Icons」をCSS擬似要素:before:after)のcontentプロパティで使用する方法をご紹介します。
Font AwesomeとはHTMLタグクラスを指定するだけで、フォントアイコンが表示できる優れものです!
Bootstrapにも相性が良く、もちろん当サイトでも使用しています。

アイコンのUnicodeを調べる

まずは、公式サイトからCSS疑似要素で表示したいアイコンを探しましょう。

目当てのアイコンを見つけたら、クリックして詳細ページに行きます。(今回はリンクアイコンを例に話を進めていきます)
そして、クラス名の右にある「Unicode: f0c1」に注目します。

Unicodeを取得

Unicode:」の後ろの英数字が、疑似要素contentプロパティに記述するためのコードになりますので、メモしておきましょう!

CSSの疑似要素に記述する

以下のように、CSS疑似要素(ここでは:after)内のcontentに、\(バックスラッシュ) + f0c1を記述します。

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
span:after {
  font-family: FontAwesome;
  content : "\f0c1";
}

CSS解説

先頭の@importの部分は、HTML側で先にfont-awesome.min.cssを読み込んでおけば不要です。
疑似要素font-familyには「FontAwesome」を指定し、contentには\(バックスラッシュ) + 入れたいアイコンのUnicodeを入れます。

【おまけ】Font Awesome Iconsの様々な使い方

Font Awesome Iconsは他にも便利な使い方がたくさんありますので、最後に少しだけ紹介します。

アイコンを回転させる

ページのローディングアイコンのように、CSSだけでアイコンを回転させます。

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

こちらのサイトが非常にわかりやすいので、参考にどうそ。

あと、本家サイトのサンプルもあるので、こちらもどうぞ。

モバイルバージョンを終了