先日 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ベータ版を使用したものです。
