WordPress 所有的 Dashicons 和其 CSS Class 以及 CODE
Dashicons 是 WordPress 3.8 版本引进的图标字体,在 WordPress 3.9 版本又增加了 30 个,在后台我们可以直接使用这些 Dashicons 图标,只要知道他的 CSS Class 或者 CODE。前台可能复杂一些,首先需要通过以下代码载入 Dashicons 的 css 文件,然后用法就一样了:
add_action( ‘wp_enqueue_scripts’, ‘wpjam_load_dashicons’ ); function wpjam_load_dashicons() { wp_enqueue_style( ‘dashicons’ ); }
但是无论如何都要知道 Dashicons 的 CSS Class 和 Code,为了方便自己和大家查询和使用,下面我就列出所有的 Dashicons 和它的 CSS class 以及 Code,欢迎大家收藏和转载:
后台菜单 – Admin Menu
图标 | CSS Class | Code |
dashicons-menu | f333 | |
dashicons-admin-site | f319 | |
dashicons-dashboard | f226 | |
dashicons-admin-post | f109 | |
dashicons-admin-media | f104 | |
dashicons-admin-links | f103 | |
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-home | F102 | |
dashicons-admin-generic | F111 | |
dashicons-admin-collapse | F148 |
欢迎界面 – Welcome Screen
图标 | CSS Class | Code |
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 |
日志格式 – Post Formats
图标 | CSS Class | Code |
dashicons-format-standard | f109 | |
dashicons-format-aside | f123 | |
dashicons-format-image | f128 | |
dashicons-format-gallery | f161 | |
dashicons-format-video | f126 | |
dashicons-format-status | f130 | |
dashicons-format-quote | f122 | |
dashicons-format-links | f103 | |
dashicons-format-chat | f125 | |
dashicons-format-audio | f127 | |
dashicons-camera | f306 | |
dashicons-images-alt | f232 | |
dashicons-images-alt2 | f233 | |
dashicons-video-alt | f234 | |
dashicons-video-alt2 | f235 | |
dashicons-video-alt3 | f236 |
媒体 – Media
图标 | CSS Class | Code |
dashicons-media-archive | f501 | |
dashicons-media-audio | f500 | |
dashicons-media-code | f499 | |
dashicons-media-default | f498 | |
dashicons-media-document | f497 | |
dashicons-media-interactive | f496 | |
dashicons-media-spreadsheet | f495 | |
dashicons-media-text | f491 | |
dashicons-media-video | f490 | |
dashicons-playlist-audio | f492 | |
dashicons-playlist-video | f493 |
图标编辑 – Image Editing
图标 | CSS Class | Code |
dashicons-image-crop | f165 | |
dashicons-image-rotate-left | f166 | |
dashicons-image-rotate-right | f167 | |
dashicons-image-flip-vertical | f168 | |
dashicons-image-flip-horizontal | f169 | |
dashicons-undo | f171 | |
dashicons-redo | f172 |
富文本编辑 – TinyMCE
图标 | CSS Class | Code |
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-expand | f211 | |
dashicons-editor-contract | f506 | |
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 | |
dashicons-editor-break | f464 | |
dashicons-editor-code | f475 | |
dashicons-editor-paragraph | f476 |
日志 – Posts
图标 | CSS Class | Code |
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-edit | f464 | |
dashicons-trash | f182 |
排序 – Sorting
图标 | CSS Class | Code |
dashicons-external | f504 | |
dashicons-arrow-up | f142 | |
dashicons-arrow-down | f140 | |
dashicons-arrow-right | f139 | |
dashicons-arrow-left | f141 | |
dashicons-arrow-up-alt | f342 | |
dashicons-arrow-down-alt | f346 | |
dashicons-arrow-right-alt | f344 | |
dashicons-arrow-left-alt | f340 | |
dashicons-arrow-up-alt2 | f343 | |
dashicons-arrow-down-alt2 | f347 | |
dashicons-arrow-right-alt2 | f345 | |
dashicons-arrow-left-alt2 | f341 | |
dashicons-sort | f156 | |
dashicons-leftright | f229 | |
dashicons-randomize | f503 | |
dashicons-list-view | f163 | |
dashicons-exerpt-view | f164 |
社交 – Social
图标 | CSS Class | Code |
dashicons-share | f237 | |
dashicons-share-alt | f240 | |
dashicons-share-alt2 | f242 | |
dashicons-twitter | f301 | |
dashicons-rss | f303 | |
dashicons-email | f465 | |
dashicons-email-alt | f466 | |
dashicons-facebook | f304 | |
dashicons-facebook-alt | f305 | |
dashicons-googleplus | f462 | |
dashicons-networking | f325 |
WP 相关
图标 | CSS Class | Code |
dashicons-hammer | f308 | |
dashicons-art | f309 | |
dashicons-migrate | f310 | |
dashicons-performance | f311 | |
dashicons-universal-access | f483 | |
dashicons-universal-access-alt | f507 | |
dashicons-tickets | f486 | |
dashicons-nametag | f484 | |
dashicons-clipboard | f481 | |
dashicons-heart | f487 | |
dashicons-megaphone | f488 | |
dashicons-schedule | f489 |
内部/产品 – Internal/Products
图标 | CSS Class | Code |
dashicons-wordpress | f120 | |
dashicons-wordpress-alt | f324 | |
dashicons-pressthis | f157 | |
dashicons-update | f463 | |
dashicons-screenoptions | f180 | |
dashicons-info | f348 | |
dashicons-cart | f174 | |
dashicons-feedback | f175 | |
dashicons-cloud | f176 | |
dashicons-translation | f326 |
自定义分类 – Taxonomies
图标 | CSS Class | Code |
dashicons-tag | f323 | |
dashicons-category | f318 |
窗体 – Widgets
图标 | CSS Class | Code |
dashicons-archive | f478 | |
dashicons-tagcloud | f479 | |
dashicons-text | f480 |
警告/通知/旗帜 – Alerts/Notifications/Flags
图标 | CSS Class | Code |
dashicons-yes | f147 | |
dashicons-no | f158 | |
dashicons-no-alt | f335 | |
dashicons-plus | f132 | |
dashicons-plus-alt | f502 | |
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
图标 | CSS Class | Code |
dashicons-location | f230 | |
dashicons-location-alt | f231 | |
dashicons-vault | f178 | |
dashicons-shield | f332 | |
dashicons-shield-alt | f334 | |
dashicons-sos | f468 | |
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 | |
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-microphone | f482 | |
dashicons-desktop | f472 | |
dashicons-tablet | f471 | |
dashicons-smartphone | f470 | |
dashicons-smiley | f328 |
标签:Dashicons