WP3.9 Dashicons アップデート

先日 available for testing となった3.9ベータ版 Dashicons をチェックしてみました。
3.8で不調?だった dashicons-trash (\f458) は修正されたようです。が、逆に dashicons-post-trash (\f182) が表示されないような…
(※追記※最新版できちんと対応されました!)

WP3.9 New Dashicons

 

 

WP3.8 Dashicons

 

使い方

■ 基本はWP3.8と同じです。以前の記事を参考までにご覧ください。
Dashiconsをフロントエンドで使う

■ WP3.9 Update
Last Week in WordPress Core
CSSクラス.dashicons-before ができました。管理メニューアイコンに使われています。
:beforeのcss記述に替わるものです。

<i class="dashicons dashicons-admin-home">HOME

HOME
このように記述していたものが、

<span class="dashicons-before dashicons-admin-home">HOME

HOME
こんなふうに自然に書くことができるようになります。

カスタムポストアイコンは、

CSS#adminmenu .menu-icon-doc div.wp-menu-image:before { content: "\f331"; }

このように:beforeでcontent:にセットしていましたが、
cf.管理メニューのカスタムポストタイプにアイコンを使う方法
functions.php'menu_icon' => 'dashicons-book-alt',

このように、カスタムポスト登録のメニューアイコンにクラス名をセットするだけで、
HTML<div class="wp-menu-image dashicons-before dashicons-book-alt"> ...</div>

.dashicons-before クラスはWPコアで自動挿入され、.dashicons-book-altクラスが追加されました。少しコードが減って嬉しいですね。
 

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 ⇒ \f464 *change*
dashicons-trash \f458

post-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-email \f465 *new*
dashicons-email-alt \f466 *new*
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 ⇒ \f463 *change*
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-sos \f468 *new*
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-testimonial \f473 *new*
dashicons-portfolio \f322
dashicons-book \f330
dashicons-book-alt \f331
dashicons-download \f316
dashicons-upload \f317
dashicons-backup \f321
dashicons-clock \f469
dashicons-lightbulb \f339
dashicons-desktop \f472 *new*
dashicons-tablet \f471 *new*
dashicons-smartphone \f470 *new*
dashicons-smiley \f328

※この記事はWordPress3.9ベータ版を使用したものです。

コメントを残す

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