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
标签:

热门文章