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