WordPress3.8のアイコンフォントを管理画面以外で使う

WordPress3.8から、MP6ベースのダッシュボードが採用され、管理画面に表示されるアイコンとして、Dashiconsというアイコンフォントが使われるようになりました。

Dashiconsは、通常管理画面のみで適用されますが、フックして呼び出すことで公開画面でも利用可能です。

function YOURSITE_scripts() {
    wp_enqueue_style( 'dashicons', site_url('/')."/resource_i/css/dashicons.min.css" );
}
add_action( 'wp_enqueue_scripts', 'YOURSITE_scripts' );

アイコンとして使用する際は、フォントの一覧ページから使用したいアイコンを選んでコードをコピーします。

HTML

任意の空要素にdashiconsのクラスを振ると、対応するアイコンが表示されます。

<div class="dashicons dashicons-wordpress"></div>

表示

CSS

擬似要素を使ったアイコンの指定もできます。

li:before {
    content: "\f139";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 20px/1 'dashicons';
    vertical-align: middle;
}

表示例

  • リストマーカー
  • リストマーカー
  • リストマーカー

等幅フォントであり、デフォルトのスタイルが、インラインでの使用に向いているので、Font Awesomeほど小回りが効かない印象ですが、種類も167ありサイト制作でも十分使える内容だと思います。

管理画面と違い、公開画面の閲覧には最新のブラウザが使われているとは限らず、ウェブフォントが正常に見えない可能性があることには注意すべきでしょう。アイコンが無いと意味を成さないような使い方を控えれば、色や大きさの自由度が高いアイコンフォントは製作の助けになるはずです。

in Note