今回はFontAwesomeという人気のアイコンフォントを Genesis サイトで使う方法を紹介します。
アイコンフォントという名前の通り、まさにフォントそのものなので、見た目はアイコンでもfont-size で拡大縮小したり、color で色を変えたり、、、文字を扱うのと同じようにアイコンを扱うことができます。
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;
}