WordPress 所有的 Dashicons 和其 CSS Class 以及 CODE

最新推荐文章于 2024-04-16 09:48:36 发布
最新推荐文章于 2024-04-16 09:48:36 发布
阅读量1.5k 收藏
点赞数
分类专栏： WordPress
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gsls181711/article/details/44179849
版权

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
Allen_Kao
关注
专栏目录
把前端HTML+CSS+JavaScript脚本嵌入WP的页面中
RichardLau_Cx的博客
06-23 800
把前端HTML+CSS+JavaScript脚本嵌入WP的页面中： 一、HTML代码文件前期准备 二、通过WP的HTML小工具块更新
给Wordpress评论列表的用户昵称增加个性化角色称号和注册年数
最新发布
uu0216的博客
07-18 462
这篇文章介绍了如何在 wordpress 默认的评论列表的用户名后面增加：个性化用户角色（基于调用用户组的代码）和增加 用户注册年数 的功能。
dashicons.min.css,WordPress前端如何使用跟后台一样的Dashicons图标字体？
weixin_42315616的博客
08-03 322
很多站长都喜欢在站点菜单或其他地方添加一些图标字体，常用的就是添加Font Awesome 图标和阿里巴巴矢量库图标。其实我们使用的 WordPress 本身就有一套管理员使用的官方图标字体 Dashicons，登录我们站点后台就能看到这些图标字体。那么有没有可能在我们站点前端使用跟后台一样的 Dashicons 图标字体？那是肯定的。WordPress 前端使用Dashicons 图标字体步骤1...
WordPress所有Dashicons图标样式和用法
飞飞程序员
05-06 449
Dashicons是WordPress官方出品的用于后台的图标样式，主要用在后台右侧菜单的图标，当我们自己开发和改造后台的时候非常实用，下面列出了所有的图标，方便开发后台时使用。 经常使用的两个函数是：register_post_type() 和 add_menu_page() 通过函数中的icon参数设置图标
wordpress菜单显示css字体,使用WordPress导航CSS类花式玩耍菜单栏
weixin_32010647的博客
08-03 510
使用简单的css类给WordPress导航菜单添加多重个性化样式前言前几天云落在做自己的网站的时候发现菜单不够，所以我想能不能把菜单折叠起来，做成一般企业网站那种，本来打算用导航的CSS类来做的，结果白读之后发现使用CSS类功能的wper太少了，或者根本找不到，好吧自己折腾了，做成了一个简单的二级菜单。上面的图就是效果图，现在下面介绍下CSS类。CSS类CSS类是菜单里面WordPress默认隐藏...
WordPress 使用 Dashicons 字体图标
X-rapido的专栏
08-03 1295
随着 WordPress 3.8 版本重新设计的后台，WordPress 还引入了一套全新的字体图标 Dashicons.Dashicons 是专门为 WordPress 设计的字体图标，主要是为了迎合新的后台管理界面设计。可以看到，从侧边导航菜单到 Admin Bar，再到文章编辑器，都大量的使用了 Dashicons 字体图标，而且很漂亮。WordPress 使用 Dashicons 字体图标来
探索Dashicons：WordPress的图标字体库
gitblog_00084的博客
04-16 384
探索Dashicons：WordPress的图标字体库 dashiconsDashicons, the WordPress admin icon font. For the official resource, please see the WordPress Developer Hub.项目地址:https://gitcode.com/gh_mirrors/da/dashicons 项目简介 ...
CV_Code_Other：我PHP，HTML，CSS，JavaScript，Shell脚本和其他代码示例
02-20
CSS规则通常由选择器和声明组成，如`.class {property: value;}`。"CV_Code_Other"中的CSS示例可能涉及浮动布局、网格系统、Flexbox或CSS3动画效果。 JavaScript则是一种客户端脚本语言，它为网页添加交互性和动态...
使用HTML和CSS定制WordPress主题外观
我们将深入探讨HTML和CSS在WordPress主题中扮演的角色，以及它们如何相互配合来实现网站外观和布局的定制。 ## 1.3 必要的基础知识：HTML和CSS 这一部分将介绍HTML和CSS的基础知识，包括常用的标签和样式属性，以...
WordPress 插件——CoolCode使用方法与下载
10-30
CoolCode 是一款基于 WordPress 的代码高亮插件，其源代码来源于 Chroder.com 的 WordPress Code Highlight 插件，但在 CoolCode 中进行了大量改进，以提供更加丰富的功能和优化的用户体验。 **二、功能特性** 1. *...
移除wordpress前端自带的js和css
醉花笑
12-01 5746
wordpress在其wp-head和wp-foot函数中，会自动加载一些js和css，但这些js和css往往在我们实际的使用中却无法用到，这就造成了一些资源的浪费，会将我们的网站速度拖慢。 我们之前发布了一篇文章清理header的文章，但是这个清理不是很全面，因此在这里，我们来说明一下如何将wordpress所有自动加载的css和js清理掉，让我们的网站速度加载更快。 今天我们从wo
wordpress利用CSS让每个页面都不一样
苦涩的糖水
07-11 6162
wordpress利用CSS让每个页面都不一样。你是否厌倦了WordPress页面千篇一律的样子，是否想每个页面各不相同？比起用自定义模板，用CSS更快一些，WordPress给每篇文章或者页面指定了独一无二的body class，用这个class就可以让页面各不相同。 什么是body class body class是WordPress API: body_class()函数产生的一
wordpress添加Body Classes
511遇见
08-20 2261
我们在开发wordpress主题时，根据不同的页面来加载不同的css，这样使得主题加载速度更快，更加灵活，下面的代码实现了这个功能。 1、首先把 body 改成如下格式 <body <?php body_class() ?>> 2、在主题的functions.php文件中添加如下代码 function add_body_classes( $classes ) { // Adds a class if post type is books if ( is_s
WordPress 让特定的文章使用特定的CSS样式
苦涩的糖水
07-11 2961
WP大学之前有一篇文章介绍的是采用特定php模板的方式（见：WordPress不同分类使用不同的文章模板），本文要介绍的是自定义css的方式。 今天有个人问这个问题：怎么为Wordpress的特定文章添加特定的css样式，这篇文章将会回答一下。 大致的“原理”：以post meta的方式在文章的发布/编辑页面添加自定义输入栏用以输入自定义的css，在文章详情页载入前述输入的css。
产品类别二级分类_Avada主题产品详情页/产品分类页/产品页创建详细图文教程...
weixin_39728124的博客
11-24 1422
Avada主题建站时产品详情页使用 portfolio创建，产品分类页和产品页(产品总展示页)都用 page创建。整个创建过程还是需要花一点时间的，老魏会在本文中用图文方式详细讲解整个过程。安装 Avada主题前提条件1、教程使用的国内服务器 1核1g从实际使用来看速度并不快。如果你是学习的话，选择 1核2g配置的服务器起步，如果用 avada主题建站要使用 2核4g配置，这样才能运行流...
wordpress解决主题中路径的问题(图片,css)
web开发自学
07-11 1183
经常有人提问，看到一款主题有时候需要增加个图片，在模板文件中怎么指定路径？我曾经这样指定“../../../images/myimage.gif”，结果是行不通。 看起来一个极其的简单问题，但我认为实际上是WordPress主题开发初学者的共同障碍。举例说，假设要创建或修改一个主题，你计划显示或修改原来的一个图标。 首先，你就会上传到图片文件夹中的图像，然后用如下代码： &lt;img src=”...
wordpress class comments_open() demo code
09-10
### 回答1： Certainly! Here's a simple demo code to demonstrate how to use the `comments_open()` function in WordPress: ``` <?php $post_id = get_the_ID(); if (comments_open($post_id)) { echo 'Comments are open for this post.'; } else { echo 'Comments are closed for this post.'; } ?> ``` In this code, we first get the ID of the current post using the `get_the_ID()` function. Then, we pass the post ID to the `comments_open()` function to check if comments are open for this post. If comments are open, the function returns `true`, and we display the message "Comments are open for this post." If comments are closed, the function returns `false`, and we display the message "Comments are closed for this post." This is a very simple example, but you can use the `comments_open()` function in more complex ways, such as to conditionally display comment forms or to customize the behavior of comment-related functions based on whether comments are open or closed. ### 回答2： `comments_open()`是WordPress中的一个函数，用于检查指定的文章或页面是否允许评论。以下是一个`comments_open()`的演示代码。 ```php <?php // 获取当前文章的ID $post_id = get_the_ID(); // 检查当前文章是否允许评论 if ( comments_open( $post_id ) ) { echo '该文章允许评论'; } else { echo '该文章不允许评论'; } ?> ``` 在上面的代码中，首先我们使用`get_the_ID()`函数获取了当前文章的ID，并将其赋值给变量`$post_id`。然后，我们调用了`comments_open()`函数，并将我们获取到的文章ID作为参数传递给它。 接着，通过使用条件判断语句`if...else`，我们检查`comments_open()`函数的返回值。如果返回`true`，即该文章允许评论，则输出字符串"该文章允许评论"；如果返回`false`，即该文章不允许评论，则输出字符串"该文章不允许评论"。 通过这段演示代码，我们可以根据需要来判断某篇文章是否允许评论，并根据结果进行相应的处理或输出。这在开发WordPress主题或插件时非常有用。 ### 回答3： `comments_open()`是WordPress中的一个函数，用于判断当前文章（或页面）是否开启了评论功能。以下是一个`comments_open()`的演示代码。 ```php <?php // 获取当前文章的ID $post_id = get_the_ID(); // 检查当前文章是否开启了评论功能 if (comments_open($post_id)) { // 如果开启了评论功能，则显示评论表单 comment_form(); } else { // 如果未开启评论功能，则显示一个提示信息 echo '评论已关闭。'; } ?> ``` 在上述代码中，我们首先使用`get_the_ID()`函数获取当前文章的ID，并将其赋值给变量`$post_id`。然后，通过调用`comments_open()`函数并传入文章ID作为参数，检查评论功能是否开启。 如果`comments_open()`函数返回`true`，则表示评论功能已经开启。我们可以使用`comment_form()`函数来显示评论的表单，以供用户填写评论内容并提交。 如果`comments_open()`函数返回`false`，则表示评论功能已关闭。我们可以通过输出一个提示信息来告知用户评论已经关闭。 通过使用`comments_open()`函数，我们可以根据需要在适当的时候显示或隐藏评论表单，以实现灵活的评论管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值