现在位置: 首页 > 建站常识 > 正文

wordpress主题怎样调用dashicons字体小图标?

发布时间:2022 年 11 月 11 日

本文作者:帮建站

点击次数:359

一、调用wordpress自带的dashicons字体样式文件。

wordpress自带的dashicons的样式文件在\wp-includes\css目录下,所以,我们要在前台页面< head>头部代码的wordpress主题样式文件style.css的前面插件如下代码:

<link rel=”stylesheet” href=”<?php bloginfo(“wpurl”); ?>/wp-includes/css/dashicons.css”>

一定要把这个调用代码放在style.css调用的前面(如下图),反之,dashicons.css会有可能影响到style.css样式的实现。

二、在wordpress主题前台页面调用dashicons字体小图标。

在wordpress主题的代码中调用dashicons字体小图标,都是通过dashicons.css提供的元素class类来实现的,可以通过以下2种方式来实现。

方法1:当前标签元素自己添加dashicons的class类。

这种方法,必须使用dashicons-before这个class类,意思是“在当前元素前面使用dashicons字体小图标,然后,再添加一个dashicons小图标类。如:

<p class=”dashicons-before dashicons-visibility”>眼睛</p>

这里,我先添加dashicons-before类,再添加了一个眼睛的图标类dashicons-visibility,一般用于页面浏览量。

方法2:当前元素内部添加子元素,给子元素添加dashicons类。

也就是在当前元素的内容前面添加一个子元素,然后台给这个子元素调用dashicons字体小图标。如:

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

这里,dashicons是dashicons小图标的全局样式,dashicons-smiley是笑脸小图标类,页面会显示一个笑脸。

三、手动修改dashicons字体小图标的样式。

有时候,我们可能有不同的需求,想让这些dashicons小图标变大一点,或者改变一下它们的颜色。怎样么修改呢?其实很简单,因为这些dashicons是字体,不是图片,所以,我们可以像修改字体样式一样,来修改这些dashicons小图标的样式。当然,是在我们自己创建的style.css样式文件中修改,而不是去修改dashicons.css文件,这就是为什么在< head>中要把dashicons.css调用放在前面的原因。如:

.dashicons-smiley{ color:red; font-size:20px; }

上句,就是把笑脸小图标的颜色改成了红色,大小改成了20像素。

四、dashicons字体小图标大全。

为了方便大家在wordpress主题开发中使用dashicons字体小图标,这里,我们把dashicons提供的所有字体小图标的class类及样子展示给大家。

dashicons图标大全

WP图标CSS路径
WP图标CSS路径 /wp-includes/css/dashicons.css
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-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

问题本身还是很简单的,只是对于不熟悉的网友来说不知道什么原因,如果英语不太好的话,就以为自己买了个假主题了。问题本身还是很简单的,只是对于不熟悉的网友来说不知道什么原因,如果英语不太好的话,就以为自己买了个假主题了。

标签:

首页 在线 手机