WordPress 默认自带 Dashicons 图标字体

WordPress 默认自带 Dashicons 图标字体

Dashicons 基本信息

包含情况

  • ✅ WordPress 核心自带，无需额外下载
  • ✅ 从 WordPress 3.8 版本开始引入
  • ✅ 包含 300+ 个常用图标
  • ✅ 专门为 WordPress 管理后台设计

自动加载范围

php

// Dashicons 默认自动加载于：
1. 管理后台 (wp-admin) ✅
2. 登录页面 (wp-login.php) ✅
3. 自定义器 (Customizer) ✅
4. 前台主题 ❌（需要手动加载）

Dashicons 文件位置

text

WordPress 安装目录/
├── wp-includes/
│   └── css/
│       ├── dashicons.min.css    # 压缩版
│       └── dashicons.css        # 未压缩版
├── wp-includes/fonts/
│   └── dashicons.eot/ttf/woff  # 字体文件

在前台使用 Dashicons 的方法

方法1：在 functions.php 中加载（推荐）

php

function my_theme_enqueue_scripts() {
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

方法2：直接在前台模板中调用

html

<link rel='stylesheet' 
      href='<?php echo esc_url(includes_url('css/dashicons.min.css')); ?>'>

<i class="dashicons dashicons-whatsapp"></i>

方法3：使用 WordPress 钩子

php

// 在主题的任何地方调用
wp_enqueue_style('dashicons');

Dashicons 使用示例

HTML 代码

html

<!-- 不同标签都可以使用 -->
<i class="dashicons dashicons-admin-home"></i>
<span class="dashicons dashicons-email"></span>
<a href="#" class="dashicons dashicons-external"></a>

常用图标名称

html

<i class="dashicons dashicons-admin-home"></i>     首页
<i class="dashicons dashicons-admin-post"></i>     文章
<i class="dashicons dashicons-admin-page"></i>     页面
<i class="dashicons dashicons-admin-comments"></i> 评论
<i class="dashicons dashicons-admin-users"></i>    用户
<i class="dashicons dashicons-admin-settings"></i> 设置
<i class="dashicons dashicons-whatsapp"></i>       WhatsApp
<i class="dashicons dashicons-facebook"></i>       Facebook
<i class="dashicons dashicons-twitter"></i>        Twitter
<i class="dashicons dashicons-youtube"></i>        YouTube
<i class="dashicons dashicons-instagram"></i>      Instagram
<i class="dashicons dashicons-phone"></i>          电话
<i class="dashicons dashicons-email"></i>          邮件
<i class="dashicons dashicons-cart"></i>           购物车
<i class="dashicons dashicons-heart"></i>          爱心

重要注意事项

1. 前台需要手动加载

php

// 必须！否则前台看不到图标
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('dashicons');
});

2. Dashicons 是字体图标

css

/* 可以像字体一样设置样式 */
.dashicons {
    font-size: 24px;
    color: #0073aa;
    margin-right: 5px;
    vertical-align: middle;
}

3. 兼容性

  • ✅ WordPress 3.8+ 完美支持
  • ✅ 现代浏览器全部支持
  • ❌ IE8 及以下不支持（但 WordPress 已不支持 IE8）

4. 与 Font Awesome 的区别

特性DashiconsFont Awesome
来源WordPress 核心第三方库
图标数300+2000+
设计风格WordPress 风格通用风格
前台使用需手动加载需单独引入

快速测试 Dashicons 是否可用

php

// 创建测试短码
function dashicons_test_shortcode() {
    ob_start(); ?>
    <div style="padding:20px; background:#f5f5f5;">
        <h3>Dashicons 测试</h3>
        <p><i class="dashicons dashicons-whatsapp"></i> WhatsApp 图标</p>
        <p><i class="dashicons dashicons-admin-home" style="color:red; font-size:30px;"></i> 红色首页图标</p>
        <p><span class="dashicons dashicons-youtube"></span> YouTube 图标</p>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('dashicons_test', 'dashicons_test_shortcode');

然后在文章中使用短码 [dashicons_test]。

官方资源

最佳实践建议

  1. 前台使用：务必在 functions.php 中加载
  2. 插件开发：可以直接使用，无需额外操作
  3. 主题开发：在主题初始化函数中加载
  4. 性能：Dashicons 体积小，加载快，适合 WordPress 项目

总结：WordPress 确实默认自带 Dashicons，但需要在前台手动调用 wp_enqueue_style('dashicons') 才能生效！

Comments are closed.