WordPressのバックエンド用アイコンフォント「Dashicons」をフロントエンドで使う

WordPressには、管理画面に使うためのアイコンフォントが内蔵されています。

通常プラグインやテーマで用いられるこのアイコンフォントは、管理画面以外でも利用可能なようですので、使い方をメモ程度に。

前提

この記事の時点ではWordPressは4.5.3で、アイコンフォントは3.8であれば使えるバージョンという状態です。

アイコンフォント「Dashicons」

WordPress.orgの「Developer Resources: Dashicons」にアイコンの一覧や管理画面での使い方が書かれています。

フロントエンドでの使い方に関しても簡単で、以下のサイトで紹介されています。

• Use WordPress dashicons in the frontend

functions.phpに記載する該当部分のコードのみ引用します。

<?php
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
/**
 * Enqueue Dashicons style for frontend use
 */
function mytheme_scripts() {
  wp_enqueue_style( 'dashicons' );
}

wp_enqueue_style( 'dashicons' );だけで読み込めるのは助かります。

試しに読み込んで以下にいくつか並べてみます。

基本的にはfont-sizeが20px四方の大きさになっているようで、例えば30pxなどを指定すると高解像度の画面でなければ滲む可能性があります(特にバーガーのメニューアイコンなど→)。

使い方の例

実際に使う場合は、functions.phpに記載した上でhtmlを次のようにします。

<span class="dashicons dashicons-performance"></span>パフォーマンスのアイコンフォント

これで以下のようになります。

パフォーマンスのアイコンフォント

少々問題なのはここからで、例えばアイコンを大きくする場合にcssに以下のように書いても、アイコンフォントの指定をしているdashicons.min.cssの影響で上書きされてしまいます。

.dashicons {
 font-size: 50px;
}

cssの読み込み位置を操作すれば変更可能ですが、それでは少し手間がかかるので、別の方法として以下のサイトを参考にします。

• I WANT TO USE THE WP ICONS. HOW CAN I INCREASE THE SIZE?

上記ページで返答されている内容が該当の箇所となりますので、以下に引用します。

<a href="http://www.placeholder.com/all-courses/#dashboard" ><div class="dashicons dashicons-dashboard custom-dashicon"></div></a>

.dashicons.custom-dashicon {
 font-size: 50px;
}

方法は簡単で、クラスを複数設定することによって優先度を上げて上書きします。

例1

前項の方法を使ってhtmlとcssを以下のように設定します。

なお、dashiconsクラスを付与した要素のbefore疑似要素として表示させる構造上、空のままでspanを閉じた場合にサイズを変更するためには、widthとheightを指定する必要があります。

都合上、divからspanに変更しています。

<span class="dashicons custom-dashicons dashicons-performance"></span>パフォーマンスのアイコンフォント

.dashicons.custom-dashicon {
 font-size: 40px;
 width:40px;
 height:40px;
}

上記の設定で以下のようになります。

パフォーマンスのアイコンフォント

例2

spanの中に入れる場合は以下のような形になります。
テキストまで含まれるので、丸ごとサイズが40pxになっています。

<span class="dashicons custom-dashicons dashicons-performance">パフォーマンスのアイコンフォント</span>

.dashicons.custom-dashicon2 {
 font-size: 40px;
 width:auto;
 height:auto;
 text-align:left
}

text-alingにcenterが指定されているので、左揃えにするためにleftも指定しています。

パフォーマンスのアイコンフォント

例3

例2と同じくspanの中に入れる場合で、inline要素に変更する場合です。

<span class="dashicons custom-dashicons dashicons-performance">パフォーマンスのアイコンフォント</span>

.dashicons.custom-dashicon3 {
 font-size: 40px;
 display:inline;
 text-align:left
}

パフォーマンスのアイコンフォント

例4

cssにdashicons.min.cssを@importで読み込めば、他のアイコンフォントと同様に独自に0から設定可能です。

今回は試していませんが、以下の形でいけると思います。

@import url('http://example.com/wp-includes/css/dashicons.min.css');
/* クラス名「custom-dashicons-performance」にアイコンをパフォーマンスのアイコンを付ける場合*/
.custom-dashicons-performance:before{
 content: "\f226";
}

Dashiconsのパスは絶対パスか相対パスで指定可能です。

content: "\f226";

上記の部分はDashiconsのページに並んでいるアイコンを用いて取得できますが、概ね以下のような流れです。

1. 使いたいアイコンをクリック
2. ページ上部の大きなアイコンが使いたいアイコンに変わるのを確認
3. 「Copy CSS」のテキストリンクをクリック
4. ポップアップで出て来た内容をコピー

こちらの方が自由度が高くて良いかもしれません。

結び

はじめて試してみましたが便利ですね。

fontawesomeのように増やさないのかという意見も見ましたが、個人的には今ぐらいの数で抑えてもらう方が軽量でよいです。
dashicons.svgやdashicons.eotなどはwp-includesのfontsに入っていますが、dashicons.svgで96KB程度でした。

一応、増やしてほしい場合は言ってくれという記述も見ましたので、申請すると増やせそうではありますが。