賢威サイトでアイコンフォントを使用する方法：FontAwesome

賢威7には最初からアイコンが豊富に用意されていますが、使い込んでいくうちに別のアイコンに変更したくなることありますよね。

そんな場合にオススメなのが、FontAwesomeというアイコンフォント。アイコンと言っても名前の通りただのフォントなので、文字の色や大きさを変えるのと同じように色や大きさを変えることができます。

[ad]

functions.phpを編集

賢威7本体や子テーマのfunctions.phpに以下のコードを追加すれば読み込みは完了です。

// FontAwesomeを読み込み
add_action( 'wp_enqueue_scripts', 'wcl_enqueue_font_awesome' );
function wcl_enqueue_font_awesome() {

    wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' );
}

参考：
https://fortawesome.github.io/Font-Awesome/get-started/

正しく読み込めたかどうかを確認するには

FontAwesomeを正しく読み込めたか確認するには、Chromeなどのブラウザにある開発者ツールを使うのが便利です。開発者ツールはブラウザ上で右クリック→検証から起動できます。

正しくFontAwesomeが読み込まれていれば、「Resouses」タブの「Fonts」部分にFontAwesomeの名前が出てきます。

もしうまく読み込まれていない場合には、セミコロン（;）が抜けていないかなど、functions.php に追加したコードを確認してみて下さい。

※ 開発者ツールは、ブラウザの画面を右クリックして「検証」を押すと起動できます。