一、调用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 |
问题本身还是很简单的,只是对于不熟悉的网友来说不知道什么原因,如果英语不太好的话,就以为自己买了个假主题了。问题本身还是很简单的,只是对于不熟悉的网友来说不知道什么原因,如果英语不太好的话,就以为自己买了个假主题了。