Dashiconsをフロントエンドで使う

wp3.8から管理画面のアイコンがアイコンフォントdashiconsになりました。このアイコンセットをフロントエンドで使うことができます。

Dashicons使用方法

■ HTML

HTML<div class="dashicons dashicons-format-audio">

dashicons dashicons-@@@ というように、dashiconsと下記一覧にあるクラス名を指定します。

■ CSS

CSSfont-family: "dashicons";
content: "\f127";

■ functions.php

functions.phpfunction my_styles() {
wp_enqueue_style('dashicons');
}
add_action( 'wp_print_styles', 'my_styles' );

dashiconsをenqueueすればok。

functions.phpwp_enqueue_style('dashicons', get_stylesheet_uri(), array('dashicons'));

テーマのスタイルシートのenqueueでdashiconsに依存させて書くこともできます。
こちらはスタイルシートとdashiconsを一度にキューに追加できます。

dashicons.cssアイコン一覧

■ Admin Menu Icons

	dashicons-menu	\f333
	dashicons-admin-site	\f319
	dashicons-dashboard	\f226
	dashicons-admin-media	\f104
	dashicons-admin-page	\f105
	dashicons-admin-comments	\f101
	dashicons-admin-appearance	\f100
	dashicons-admin-plugins	\f106
	dashicons-admin-users	\f110
	dashicons-admin-tools	\f107
	dashicons-admin-settings	\f108
	dashicons-admin-network	\f112
	dashicons-admin-generic	\f111
	dashicons-admin-home	\f102
	dashicons-admin-collapse	\f148

■ Both Admin Menu and Post Formats

	dashicons-admin-links	\f103
	dashicons-format-links	\f103
	dashicons-admin-post	\f109
	dashicons-format-standard	\f109

■ Post Format Icons

	dashicons-format-image	\f128
	dashicons-format-gallery	\f161
	dashicons-format-audio	\f127
	dashicons-format-video	\f126
	dashicons-format-chat	\f125
	dashicons-format-status	\f130
	dashicons-format-aside	\f123
	dashicons-format-quote	\f122

■ Welcome Screen Icons

	dashicons-welcome-write-blog	\f119
	dashicons-welcome-edit-page	\f119
	dashicons-welcome-add-page	\f133
	dashicons-welcome-view-site	\f115
	dashicons-welcome-widgets-menus	\f116
	dashicons-welcome-comments	\f117
	dashicons-welcome-learn-more	\f118

■ Image Editing Icons

	dashicons-image-crop	\f165
	dashicons-image-rotate-left	\f166
	dashicons-image-rotate-right	\f167
	dashicons-image-flip-vertical	\f168
	dashicons-image-flip-horizontal	\f169

■ Both Image Editing and TinyMCE

	dashicons-undo	\f171
	dashicons-redo	\f172

■ TinyMCE Icons

	dashicons dashicons-editor-bold	\f200
	dashicons-editor-italic	\f201
	dashicons-editor-ul	\f203
	dashicons-editor-ol	\f204
	dashicons-editor-quote	\f205
	dashicons-editor-alignleft	\f206
	dashicons-editor-aligncenter	\f207
	dashicons-editor-alignright	\f208
	dashicons-editor-insertmore	\f209
	dashicons-editor-spellcheck	\f210
	dashicons-editor-distractionfree	\f211
	dashicons-editor-kitchensink	\f212
	dashicons-editor-underline	\f213
	dashicons-editor-justify	\f214
	dashicons-editor-textcolor	\f215
	dashicons-editor-paste-word	\f216
	dashicons-editor-paste-text	\f217
	dashicons-editor-removeformatting	\f218
	dashicons-editor-video	\f219
	dashicons-editor-customchar	\f220
	dashicons-editor-outdent	\f221
	dashicons-editor-indent	\f222
	dashicons-editor-help	\f223
	dashicons-editor-strikethrough	\f224
	dashicons-editor-unlink	\f225
	dashicons-editor-rtl	\f320

■ Post Icons

	dashicons dashicons-align-left	\f135
	dashicons-align-right	\f136
	dashicons-align-center	\f134
	dashicons-align-none	\f138
	dashicons-lock	\f160
	dashicons-calendar	\f145
	dashicons-visibility	\f177
	dashicons-post-status	\f173
	dashicons-post-trash	\f182
	dashicons-edit	\f327
	dashicons-trash	\f458

trashアイコン壊れてる？

■ Sorting

	dashicons dashicons-arrow-up	\f142
	dashicons-arrow-down	\f140
	dashicons-arrow-left	\f141
	dashicons-arrow-right	\f139
	dashicons-arrow-up-alt	\f342
	dashicons-arrow-down-alt	\f346
	dashicons-arrow-left-alt	\f340
	dashicons-arrow-right-alt	\f344
	dashicons-arrow-up-alt2	\f343
	dashicons-arrow-down-alt2	\f347
	dashicons-arrow-left-alt2	\f341
	dashicons-arrow-right-alt2	\f345
	dashicons-leftright	\f229
	dashicons-sort	\f156
	dashicons-list-view	\f163
	dashicons-exerpt-view	\f164

■ Social Icons

	dashicons-share	\f237
	dashicons-share1	\f237
	dashicons-share-alt	\f240
	dashicons-share-alt2	\f242
	dashicons-twitter	\f301
	dashicons-rss	\f303
	dashicons-facebook	\f304
	dashicons-facebook-alt	\f305
	dashicons-networking	\f325
	dashicons-googleplus	\f462

■ Jobs Icons

	dashicons-hammer	\f308
	dashicons-art	\f309
	dashicons-migrate	\f310
	dashicons-performance	\f311

■ Internal/Products

	dashicons-wordpress	\f120
	dashicons-wordpress-alt	\f324
	dashicons-pressthis	\f157
	dashicons-update	\f113
	dashicons-screenoptions	\f180
	dashicons-info	\f348
	dashicons-cart	\f174
	dashicons-feedback	\f175
	dashicons-cloud	\f176
	dashicons-translation	\f326

■ Taxonomies

	dashicons-tag	\f323
	dashicons-category	\f318

■ Alerts/Notifications/Flags

	dashicons-yes	\f147
	dashicons-no	\f158
	dashicons-no-alt	\f335
	dashicons-plus	\f132
	dashicons-minus	\f460
	dashicons-dismiss	\f153
	dashicons-marker	\f159
	dashicons-star-filled	\f155
	dashicons-star-half	\f459
	dashicons-star-empty	\f154
	dashicons-flag	\f227

■ Misc/CPT

	dashicons-location	\f230
	dashicons-location-alt	\f231
	dashicons-camera	\f306
	dashicons-images-alt	\f232
	dashicons-images-alt2	\f233
	dashicons-video-alt	\f234
	dashicons-video-alt2	\f235
	dashicons-video-alt3	\f236
	dashicons-vault	\f178
	dashicons-shield	\f332
	dashicons-shield-alt	\f334
	dashicons-search	\f179
	dashicons-slides	\f181
	dashicons-analytics	\f183
	dashicons-chart-pie	\f184
	dashicons-chart-bar	\f185
	dashicons-chart-line	\f238
	dashicons-chart-area	\f239
	dashicons-groups	\f307
	dashicons-businessman	\f338
	dashicons-id	\f336
	dashicons-id-alt	\f337
	dashicons-products	\f312
	dashicons-awards	\f313
	dashicons-forms	\f314
	dashicons-portfolio	\f322
	dashicons-book	\f330
	dashicons-book-alt	\f331
	dashicons-download	\f316
	dashicons-upload	\f317
	dashicons-backup	\f321
	dashicons-lightbulb	\f339
	dashicons-smiley	\f328

参考

■http://jameskoster.co.uk/work/using-wordpress-3-8s-dashicons-theme-plugin/#navigation
■http://melchoyce.github.io/dashicons/
こちらから簡単にコピペできます。

※投稿日現在、WordPress3.8.1です。