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

Web制作

こんにちは。
Web制作者のhikaruです。

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

Font Awesomeを読み込む

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

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

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

CDNで読み込む方法

Font AwesomeにログインしてCDNコードを確認します。

確認後headタグ内にコードを記述して読み込み完了です。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="ここにはご自身のコードを入力してください" crossorigin="anonymous">

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マイページで確認できます。

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

擬似要素 (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 Awesomのiconコードを確認できます。

Font Awesomeでアイコンのコードを確認する方法

まとめ

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

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

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

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

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP