Genesisサイトでioniconsを使用する方法

今回は巷で話題の ionicons というアイコンフォントを Genesisサイト で使用する方法を紹介したいと思います。

ioniconsはアイコン自体がフォントになっていて、FontAwesomeというアイコンフォントと同じようなものなのですが、FontAwesomeと比べると角がカクッとしたものや、ラインアートのように線が細めのアイコンが中心です。FontAwesomeでは角が丸く可愛らしいアイコンが多いので、FontAwesomeよりもクールなデザインやスタイリッシュなデザインに重宝します。

GenesisサイトでFontAwesomeを使う方法

functions.php から ionicons を読み込み

functions.php に以下のコードを追加して、ionicons を読み込みます。

add_action( 'wp_enqueue_scripts', 'gwpf_enqueue_scripts' );
function gwpf_enqueue_scripts() {
    wp_enqueue_style('wp-ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION);

ioniconsを読み込めたら、あとは投稿やPHPファイル、CSSファイルから使用することができます。

使い方

ioniconsもFontAwesomeと同じようにチートシートがあるので、この中から使いたいアイコンを探すのがオススメ。

ionicons Cheatsheet

1 HTML・PHPの場合

投稿やPHPファイルから、ioniconsのコードを追加出来る場合の話です。

以下のように、icon というクラス名と、使用したいアイコンのクラス名（ion-alert）を追加します。

<i class="icon ion-alert"></i>

2 CSSの場合

ウィジェットで表示されるタイトルなど、直接HTMLやPHPを追加しにくい場合に、CSSの ::before、::after の content を通してioniconsを利用することができます。

こちらもFontAwesomeと使い方は同じなのですが、使用したいアイコンの CSS content用コードを指定すればOKです（上で紹介したチートシートに、それぞれのコードが書いてあります）。

.widgettitle::before {
    content: "\f101";
    font-family: ionicons;
}