ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法

FontAwesomeは絵文字のようなウェブフォントです。

画像ではなくテキストとして表示されるので、色やサイズをテキストと同じようにcssで設定できます。

←小さくしたり

←大きくしたり色を変えたり

FontAwesomeの導入方法

FontAwesomeはダウンロードして使う方法と、サーバー上に公開されているcssを読み込む方法があります。

この記事ではサーバー上のcssを読む方法を紹介します。(簡単なので!)

下記のコードをhead要素内に書くだけです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

最新のcssファイルのURLはこちらのリンクから参照することができます。

WordPressの場合

WordPressの場合はheader.phpに上記のコードを記載するか、function.phpに下記のコードを記載します。

wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );

使っているテーマで導入されてるバージョンが古い場合

WordPressのwp_enqueue_style関数は、同じIDで既にcssが読まれている場合は後の処理は無効になる仕様になっています。

なので親テーマで使われているIDを調べ、子テーマで先に使ってしまえば親テーマの処理を無効にできます。(子テーマのfunction.phpは親テーマのfunction.phpより先に実行される)

FontAwesomeの使い方

FontAwesomeのページにアクセスして使いたいアイコンを選ぶ。

使いたいアイコンのページにある<i>~</i>をコピーする。

コピーしたタグを表示したい位置に張り付ける。