Font Awesome 5 で疑似要素 Before や After を利用してアイコンを表示する方法

Font AwesomeはWebサイトで簡単に多種多様なアイコンを導入表示できるサービスです。
SVGなので画像ほど重くなく、アイコンの色や大きさもテキストのようにCSSで簡単に変更できます。
最近になりFont Awesome 4からFont Awesome 5にバージョンアップし
より軽く、よりスピーディーに表示が出来るようになりました。
Font Awesome 5は有料版のPRO版もありますが、無料版もあるので気軽にご利用できます。

そんなFont Awesome 5ですが、
この記事ではFont Awesome 5をCSSの疑似要素BeforeやAfterで利用する方法を記載します。

1. Font Awesome 5を読み込む

まずは通常通りJSを使ってFont Awesome5 を読み込みます。
読み込み方にはいくつかありますが、ここでは簡単なCDNを使った読み込み方法を紹介しています。
ちなみに以下は無料のバージョンです。
この記事を書いている時点からバージョンアップしている可能性もあるので
公式サイトでバージョンを確認したほうがいいかもしれません。

<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>

2. 疑似要素を有効にする

Font Awesome 5はデフォルトでは肘要素が無効にされています。
以下のJavascriptで有効にします。

<script>
    window.FontAwesomeConfig = {
        searchPseudoElements: true
    }
</script>

2. 疑似要素を有効にする

.あなたのクラス名:before {
display: none;
content: "\f007";
font-family: "Font Awesome 5 Solid";
}

contentのunicodeは公式サイトのアイコンの以下の場所に記載されていますので
アイコンによって変更してください。
Font Awesome 5 contentに記載するUnicodeの場所

以上です。
これでFontawesome4と同じように擬似要素を使った利用が出来ます。

カテゴリー: CSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です