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

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

Dashicons使用方法

■ HTML

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

dashicons [email protected]@@ というように、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です。

2 thoughts on “Dashiconsをフロントエンドで使う

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA