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

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

アイコンのUnicodeを調べる

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

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

「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>

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

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

• Original:https://minory.org/font-awesome-content.html
• Source:Minory
• Author:管理者

Amazonベストセラー