ワードプレスでFontAwasomeのアイコンフォントを利用する方法

FontAwasomeは、アイコンフォントを数百種類無料で利用できる優れたフォントセットです。これらのアイコンをワードプレスで利用できるようにする方法を解説いたします。

方法１　直接FontAwasome(CDN)から読み込んで利用する最も簡単な方法

フォントアウェイサムから直接関連データを読み込んでアイコンをワードプレス上で利用できるようにするには下記のコードをFunctions.phpに書き込みます。

function wp_load_fontawesome() {
    wp_enqueue_style( 
		'font-awesome-5', 
		'https://use.fontawesome.com/releases/v5.3.0/css/all.css', 
		array(), 
		'5.3.0' 
	);
}
 
add_action( 'wp_enqueue_scripts', 'wp_load_fontawesome' );

このコードはワードプレスのヘッダーに追加でJSやCSS等のファイルを読み込む処理です。
このコードを追加したら下記のようなアイコン表示HTMLを利用できるようになります。

<i class="fa fa-home fa-fw"></i>

ただ、この方法は上記URLでフォントの配信が停止されてしまうと全てのサイトのアイコンフォントが表示されなくなってしまうリスクがございます。

方法２　直接FontAwasomeアイコンフォントをローカルから読み込む方法

まずFontAwasomeの無料版をダウンロードして、解凍の上、テーマのフォルダに入れます。
ダウンロード

次に先ほどと同じようにwp_enqueue_scriptsをFunctions.phpに書き込みます。

function wp_load_fontawesome() {
    wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/フォントAmasomeのフォルダ名/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'wp_load_fontawesome' );

※フォントAmasomeのフォルダ名　の部分は解凍したZIPフォルダの名称に置き換えてください

WordPress ワードプレスのテーマのカスタマイズ、プラグイン作成、その他トラブル解決はWPドクターにご相談・ご依頼くださいませ