欢迎您光临爱永设计官网!
电话图标 服务热线/微信:13436537174 QQ咨询:276583799

新闻资讯

news

WordPress 所有 Dashicons 图标字体及应用方法

发表日期:2020-03-06 文章作者:爱永设计  浏览次数:255881 次

近期开发一些网站,需要增加一些自定义文章类型,但是这些默认的小图标不是理想的,wordpress 为我们提供了好多小图标,只需要用其短代码或类就可以获取到,由于官网在大陆打不开,我整理了一下,整理于2020年3月6日。

Dashicons 是 WordPress 官方出的用于后台的图标字体,可以用于在后台右侧的菜单,register_post_type() 和 add_menu_page() 函数参数都有一个 icon 的选项用来设置图标。

注册新的文章类型register_post_type() 中使用

add_action( 'init', function() {
    register_post_type( 'acme_product',
        array(
            'label' => 'Products',
            'public'      => true,
            'has_archive' => true,
            'menu_icon'   => 'dashicons-products',
        )
    );
});

注册新的page页:add_menu_page() 中使用
function 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:

<p class="dashicons-before dashicons-smiley">笑脸</p>

dashicons class:

<p><span class="dashicons dashicons-smiley"></span>笑脸</p>

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

将文章分享到..
相关资讯
最新主题模板
随机新闻
最新网站案例
  • 更多 +我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 更多 +网站模板优势

  • 更多 +关于爱永设计

    爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!

Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作