注意!! この投稿は2年と11ヶ月くらい前に公開したものです。
そのため正常に動作しないかもしれないので、ご注意ください。

WordPressの公式アイコンフォントのDashiconsの使い方

宮さんが「ういーっす。Dashicons in WordPress 3.9の日本語訳はないの〜?」って言ってたので訳そうと思ったんだけど、Dashiconsの使い方そのものの日本語訳が見つかんなかったんで、ついでにご紹介。

Dashicons」はWordPress 3.8から導入され、先日リリースされ、3.9でさらにいくつか追加されたWordPressの管理画面で使われている公式のアイコンフォントで、

こんなようなやつです。

テーマで使うには

functions.phpに以下を追加して、

add_action( 'wp_enqueue_scripts', 'themename_scripts' );

function themename_scripts() {
    wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array('dashicons'), '1.0' );
}

スタイルシートで、適用したい要素の擬似クラスに以下のようにします。

.paintbrush-link:before {
    font-family: "dashicons";
    content: "\f100";
 }

content: "XXXXX";XXXXX
http://melchoyce.github.io/dashicons/
で希望のアイコンをクリックしてから上の「Copy CSS」をクリックすると取得できます。

参考: Using WordPress 3.8′s dashicons in your theme or plugin

記事等のコンテンツ内で使うには

functions.phpに上述のコードを追加したら、投稿エディター内等で

<div class="dashicons dashicons-admin-media"></div>

のように入れると表示されます。

この「dashicons-admin-media」等にアイコンが割り振られていて
http://melchoyce.github.io/dashicons/
で希望のアイコンをクリックしてから上の「Copy HTML」をクリックすると希望のクラス名を取得できます。

カスタム投稿タイプのメニューアイコンとして使うには

// Register a new custom post type named &quot;Portfolio&quot;
register_post_type('portfolio', array(
 'public'    => true,
 'menu_icon' => 'dashicons-portfolio',
 'label'     => __( 'Portfolio', 'local' ),
);

のように’menu_icon’で希望のアイコンのCSSクラス名を指定します。クラス名は
http://melchoyce.github.io/dashicons/
で希望のアイコンをクリックしてから上の「Copy HTML」をクリックして取得できるhtmlのdivの2つ目のクラスがその該当のクラス名です。(これの一覧はどっかにないのかな?)

参考: Using Dashicons For Custom Post Types

“WordPressの公式アイコンフォントのDashiconsの使い方” への 3 件のフィードバック

コメントは受け付けていません。