如何在WordPress中使用Dashicon

Dashicons是一组与 wordpress 捆绑在一起的字体图标，它提供了一种向 WordPress 网站添加图标的简单方法。自该项目首次推出以来，它已发展成为一种宝贵的资源，包括丰富的 300 多个独立图标！

如何在WordPress中使用Dashicon 第1张

Dashicon 易于使用，涵盖了大多数图标需求的用例，因此它们减少了对第三方图标库的需求。

有趣的事实：每次您访问 Dashicons 主页时，它都会显示一个随机图标！亲自尝试一下。

什么是字体图标？

字体图标正是它们听起来的样子。每个字体图标集（例如 Dashicons）都是一种常规字体，就像任何其他字体一样，但它包含符号而不是字母和数字。

这使它们易于使用，但 Dashicons 的一个缺点是它们被有效地编译为单个大精灵（包含所有单独图标的排列的大单个图像）。

可以想象，图标集合增长得越大，字体图标精灵的整体大小也会增长。即使使用缓存，如果您只需要一个或两个图标，包含每个图标也不理想。

然而，这并没有阻止字体图标在过去几年中大受欢迎。

在 WordPress 中访问 Dashicon

好消息是 Dashicon 包含在 WordPress 核心中，因此它们可以开箱即用。它们实际上会自动添加到每个 WordPress 管理页面，因此您根本不需要做太多工作就可以使用它们。

但是，如果您打算在网站的前端显示 Dashicon，则需要先将它们排入队列，然后再尝试使用它们。

要在您网站的前端启用 Dashicons，请将其添加到插件或主题中：

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

现在我们都准备好开始在我们的 WordPress 网站上使用 Dashicons 了！

如何显示 Dashicons

现在为您一直在等待的部分！Dashicons 可以通过几种不同的方式添加到您的站点，具体取决于您的要求：

WordPress 管理菜单中的自定义插件图标
插件设置页面标记的自定义图标
块图标组件
前端帖子或页面内容中的任何位置

为插件创建自定义菜单图标

如果您正在开发插件，那么您可以通过显示插件的自定义菜单图标以及插件设置页面上的标题（如果您愿意）来利用 WordPress 管理员中随时可用的 Dashicons。

function htud_add_options_page() {
  add_menu_page(
    'How to use Dashicons',
    'How to use Dashicons',
    'manage_options',
    'how-to-use-dashicons',
    'htud_render_settings_page',
    'dashicons-superhero-alt' // Add Dashicon to menu.
  );
}
add_action('admin_menu', 'htud_add_options_page');

function htud_render_settings_page() {
  // Add Dashicon to settings page title.
?>
<div class="wrap" style="display:flex;align-items:baseline;">
    <span class="dashicons dashicons-admin-site"></span>
    <h1 class="heading"><?php _e( 'Settings Page', 'text-domain' ); ?></h1>
  </div>
  <?php
}

这就是它在 WordPress 管理员中的外观：

如何在WordPress中使用Dashicon 第2张您还可以在管理菜单中使用 Dashicons 来自定义帖子类型。

function custom_post_type() {
  $args = array(
      'label' => __( 'My Custom Post Type', 'text_domain' ),
      'show_ui' => true,
      'menu_icon' => 'dashicons-drumstick', // Add Dashicon to custom post type menu.
  );
  register_post_type( 'My Custom Post Type', $args );
}
add_action( "init", "custom_post_type" );

这会为您的自定义帖子类型添加一个菜单图标，类似于上面的设置页面示例。

如何在WordPress中使用Dashicon 第3张在古腾堡区块中使用 Dashicons

如果您为 Gutenberg 编辑器开发块，您还可以通过<Dashicon/ >组件直接在代码中使用 Dashicons。

该组件非常易于使用。只需将其导入并将其添加到块中，如下所示：

import { useBlockProps } from '@wordpress/block-editor';
import { Dashicon } from '@wordpress/components';

export default function Edit() {
  return (
    <div {...useBlockProps()}>
      <Dashicon icon="businessman" />
      <Dashicon icon="awards" />
      <Dashicon icon="pets" />
      <Dashicon icon="heart" />
    </div>
  );
}

这会将四个指定的 Dashicon 呈现在一行上。

如何在WordPress中使用Dashicon 第4张检查代码会显示组件输出的实际标记，当您选择一个图标并单击Copy html链接<Dashicons />时，它是一个具有从 Dashicons 网站生成的相同内容结构的 span 标签。