Dashicons 是 WordPress 官方出的用于后台的图标字体。
可以用于在后台右侧的菜单,register_post_type()
和 add_menu_page()
函数参数都有一个 icon
的选项用来设置图标。
Admin Menu Icons
dashicons-menu
dashicons-admin-site
dashicons-dashboard
dashicons-admin-media
dashicons-admin-page
dashicons-admin-comments
dashicons-admin-appearance
dashicons-admin-plugins
dashicons-admin-users
dashicons-admin-tools
dashicons-admin-settings
dashicons-admin-network
dashicons-admin-generic
dashicons-admin-home
dashicons-admin-collapse
dashicons-filter
dashicons-admin-customizer
dashicons-admin-multisite
Both Admin Menu and Post Formats
dashicons-admin-links
dashicons-format-links
dashicons-admin-post
dashicons-format-standard
Post Format Icons
dashicons-format-image
dashicons-format-gallery
dashicons-format-audio
dashicons-format-video
dashicons-format-chat
dashicons-format-status
dashicons-format-aside
dashicons-format-quote
Welcome Screen Icons
dashicons-welcome-write-blog
dashicons-welcome-edit-page
dashicons-welcome-add-page
dashicons-welcome-view-site
dashicons-welcome-widgets-menus
dashicons-welcome-comments
dashicons-welcome-learn-more
Image Editing Icons
dashicons-image-crop
dashicons-image-rotate
dashicons-image-rotate-left
dashicons-image-rotate-right
dashicons-image-flip-vertical
dashicons-image-flip-horizontal
dashicons-image-filter
Both Image Editing and TinyMCE
dashicons-undo
dashicons-redo
TinyMCE Icons
dashicons-editor-bold
dashicons-editor-italic
dashicons-editor-ul
dashicons-editor-ol
dashicons-editor-quote
dashicons-editor-alignleft
dashicons-editor-aligncenter
dashicons-editor-alignright
dashicons-editor-insertmore
dashicons-editor-spellcheck
dashicons-editor-distractionfree
dashicons-editor-expand
dashicons-editor-contract
dashicons-editor-kitchensink
dashicons-editor-underline
dashicons-editor-justify
dashicons-editor-textcolor
dashicons-editor-paste-word
dashicons-editor-paste-text
dashicons-editor-removeformatting
dashicons-editor-video
dashicons-editor-customchar
dashicons-editor-outdent
dashicons-editor-indent
dashicons-editor-help
dashicons-editor-strikethrough
dashicons-editor-unlink
dashicons-editor-rtl
dashicons-editor-break
dashicons-editor-code
dashicons-editor-paragraph
dashicons-editor-table
Post Icons
dashicons-align-left
dashicons-align-right
dashicons-align-center
dashicons-align-none
dashicons-lock
dashicons-unlock
dashicons-calendar
dashicons-calendar-alt
dashicons-visibility
dashicons-hidden
dashicons-post-status
dashicons-edit
dashicons-post-trash
dashicons-trash
dashicons-sticky
Sorting
dashicons-external
dashicons-arrow-up
dashicons-arrow-down
dashicons-arrow-left
dashicons-arrow-right
dashicons-arrow-up-alt
dashicons-arrow-down-alt
dashicons-arrow-left-alt
dashicons-arrow-right-alt
dashicons-arrow-up-alt2
dashicons-arrow-down-alt2
dashicons-arrow-left-alt2
dashicons-arrow-right-alt2
dashicons-leftright
dashicons-sort
dashicons-randomize
dashicons-list-view
dashicons-exerpt-view
dashicons-excerpt-view
dashicons-grid-view
dashicons-move
WPorg specific icons: Jobs, Profiles, WordCamps
dashicons-hammer
dashicons-art
dashicons-migrate
dashicons-performance
dashicons-universal-access
dashicons-universal-access-alt
dashicons-tickets
dashicons-nametag
dashicons-clipboard
dashicons-heart
dashicons-megaphone
dashicons-schedule
Internal/Products
dashicons-wordpress
dashicons-wordpress-alt
dashicons-pressthis
dashicons-update
dashicons-screenoptions
dashicons-cart
dashicons-feedback
dashicons-cloud
dashicons-translation
Taxonomies
dashicons-tag
dashicons-category
Widget icons
dashicons-archive
dashicons-tagcloud
dashicons-text
Media icons
dashicons-media-archive
dashicons-media-audio
dashicons-media-code
dashicons-media-default
dashicons-media-document
dashicons-media-interactive
dashicons-media-spreadsheet
dashicons-media-text
dashicons-media-video
dashicons-playlist-audio
dashicons-playlist-video
dashicons-controls-play
dashicons-controls-pause
dashicons-controls-forward
dashicons-controls-skipforward
dashicons-controls-back
dashicons-controls-skipback
dashicons-controls-repeat
dashicons-controls-volumeon
dashicons-controls-volumeoff
Alerts/Notifications/Flags
dashicons-yes
dashicons-no
dashicons-no-alt
dashicons-plus
dashicons-plus-alt
dashicons-plus-alt2
dashicons-minus
dashicons-dismiss
dashicons-marker
dashicons-star-filled
dashicons-star-half
dashicons-star-empty
dashicons-flag
dashicons-info
dashicons-warning
Social Icons
dashicons-share
dashicons-share1
dashicons-share-alt
dashicons-share-alt2
dashicons-twitter
dashicons-rss
dashicons-email
dashicons-email-alt
dashicons-facebook
dashicons-facebook-alt
dashicons-networking
dashicons-googleplus
Misc/CPT
dashicons-location
dashicons-location-alt
dashicons-camera
dashicons-images-alt
dashicons-images-alt2
dashicons-video-alt
dashicons-video-alt2
dashicons-video-alt3
dashicons-vault
dashicons-shield
dashicons-shield-alt
dashicons-sos
dashicons-search
dashicons-slides
dashicons-analytics
dashicons-chart-pie
dashicons-chart-bar
dashicons-chart-line
dashicons-chart-area
dashicons-groups
dashicons-businessman
dashicons-id
dashicons-id-alt
dashicons-products
dashicons-awards
dashicons-forms
dashicons-testimonial
dashicons-portfolio
dashicons-book
dashicons-book-alt
dashicons-download
dashicons-upload
dashicons-backup
dashicons-clock
dashicons-lightbulb
dashicons-microphone
dashicons-desktop
dashicons-laptop
dashicons-tablet
dashicons-smartphone
dashicons-phone
dashicons-smiley
dashicons-index-card
dashicons-carrot
dashicons-building
dashicons-store
dashicons-album
dashicons-palmtree
dashicons-tickets-alt
dashicons-money
dashicons-thumbs-up
dashicons-thumbs-down
dashicons-layout
dashicons-paperclip
register_post_type()
中使用:
代码语言:javascript复制add_action( 'init', function() {
register_post_type( 'acme_product',
array(
'label' => 'Products',
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-products',
)
);
});
add_menu_page()
中使用:
代码语言:javascript复制function wpjam_add_my_custom_menu() {
// Add an item to the menu.
add_menu_page(
'My Page',
'My Title',
'manage_options',
'my-page',
'my_admin_page_function',
'dashicons-admin-media'
);
}
CSS/HTML 中使用:
用两种用法:
dashicons-before class:
代码语言:javascript复制<p class="dashicons-before dashicons-smiley">笑脸
dashicons class:
代码语言:javascript复制<span class="dashicons dashicons-smiley"></span>笑脸