GenesisサイトでFontAwesomeを使う方法

今回はFontAwesomeという人気のアイコンフォントを Genesis サイトで使う方法を紹介します。

アイコンフォントという名前の通り、まさにフォントそのものなので、見た目はアイコンでもfont-size で拡大縮小したり、color で色を変えたり、、、文字を扱うのと同じようにアイコンを扱うことができます。

http://fontawesome.io/

FontAwesomeの使い方

1 functions.phpでFontAwesomeを読み込み

Genesis子テーマのfunctions.phpに以下のコードを追加します。

これで、FontAwesomeの読み込みは完了です。

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {

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

}

2 style.cssを編集

FontAwesomeを表示させるには、<i>タグを使う方法と、CSSの擬似要素を使う方法あるので、アイコンを表示させる場所などに合わせて選択して下さい。

iタグを使う方法

それでは黒い矢印のアイコンを表示させてみましょう。

<i>タグを使ってアイコンを表示させる場合は、記事編集画面やテキストウィジェットなどを使って、以下のように入力します。

<i class="fa fa-arrow-down" aria-hidden="true"></i>

上のコード中のfaは、FontAwesomeのアイコンを使う場合には、どのアイコンにも入るクラス名です。

下の画像にあるfa-arrow-downが、指定したアイコンを表示させるのに必要なクラス名です。別のアイコンを表示させる場合には、このfa-arrow-downというクラス名を変更して下さい。

http://fontawesome.io/cheatsheet/

CSSの擬似要素を使う場合

CSSの擬似要素を使う方法は、直接HTMLやPHPコードに<i>タグを追加しにくい場合にとても便利です。

今度はCSSを使ってフォルダーのアイコンを『カテゴリー』の文字の前に表示させてみましょう。

CSSを使ってアイコンを表示させる場合は、下の画像にあるf115というコードを使います。

以下のコードをstyle.cssに追加すれば、アイコンが表示されます。

.entry-categories:before {
    content: "\f115";
    margin-right: 3px;
    color: #888;
}