【2022年最新】Font Awesome – css擬似要素で利用する方法

Web制作

今回は、Font Awesomeを、
css擬似要素(before、after)で利用する方法を紹介していきます。

Font Awesomeを読み込む

Font AwesomeにはCDN経由で読み込む方法や、
Kitsで読み込む方法があります。

公式はKitsで読み込む方法を推進している様ですが、正直CNDのほうが簡単に読み込めます。

すでに読み込んでいる方は、次のステップへ進んでください。

ここではいくつか想定される読み込み方法を、
紹介しています。

CDNで読み込む方法

こちらのサイトからCDNリンクをコピーしてheadタグ内に貼り付けるのが一番簡単です。

2022年3月現在だと下記のコードで大丈夫だと思います。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

もしくは公式サイトのこちらにも同じようなコードがありましたので公式から引っ張ってきても大丈夫だと思います。

KitsでWordPreeに読み込む方法

次のコードをfunctions.phpに記述することで、ワードプレスでFont Awesomが利用できます。

/**
 * Font Awesome Kit Setup
 * 
 * This will add your Font Awesome Kit to the front-end, the admin back-end,
 * and the login screen area.
 */
if ( !function_exists( 'fa_custom_setup_kit' ) ) {
	
	function fa_custom_setup_kit($kit_url = '') {
		foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
			add_action(
				$action,
				function () use ( $kit_url ) {
				wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
				}
			);
		}
	}
}

fa_custom_setup_kit('https://kit.fontawesome.com/42deadbeef.js');

上記コードは公式ホームページを参照しています。

最終行「 42deadbeef.js 」は、
ご自身のキットトークンに置き換えてください。

キットトークンは、
Font Awesomeのグローバルメニュー「Kits」から確認できます。

おそらく下記の様な形式になっていると思いますので、
kit.fontawesome.com/の後ろにある〇〇.jsをコピーすればOKです!

<script src="https://kit.fontawesome.com/42deadbeef.js" crossorigin="anonymous"></script>

※ちなみに、Kitsで読み込む場合
無料プランは、1ヶ月10,000ページビューまで
という制限があるので注意が必要です。

公式ページには、ページビューの制限を超えると、
超過料金が発生する可能性があると
何やら怖いことが書いてあるので注意が必要です。

あと注意点としては、Kitsは無料プランの場合、
1アカウント1個しか作れないっぽいので、
複数作ってページビュー数を分散するとかってことができないようです。

スタイルシートへの記述方法

擬似要素 (before/after) で利用するときに、
必須なコードは次の通りです。

.icon::before {
    content: "\f518";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
  • content値は、アイコンによって、置き換えてください。
  • pro版を利用している場合、font-weightを切り替えることで、スタイルを変更可能。
  • ブランドアイコンを利用する場合、font-family値を「Font Awesome 5 Brands」に変更してください。

アイコンの数字はこちらのページから確認できます。

Font Awesome - css擬似要素で利用する方法

まとめ

アイコンが表示されない時は、
head内にFont Awesomeが読みこまれていることや、
font-weight、font-family、アイコンコードが指定されていることを、確認するといいと思います。

ちなみにweb業界未経験の方でスクール選びに迷っている方はこちらの記事を参考にしてみてください。

以上、「Font Awesomeをcss擬似要素で利用する方法」でした。

マグロ

都内にあるWeb制作会社で技術部分を担当しています。

関連記事

特集記事

コメント

この記事へのコメントはありません。

マグロ

都内にあるWeb制作会社で技術部分を担当しています。

TOP