将 fontastic.me 列为 'dashicons' 而不阻塞现有的 Wordpress dashicons

Question

我想要实现的目标：

我想在我的 Wordpress 网站上使用自定义图标（包括在管理菜单中）。

到目前为止我做了什么

我已经在 fontastic.me 上设置了一个帐户，并使用挂接到 'admin print styles'

的 functions.php 中的以下字体将字体排队

wp_enqueue_style('fontastic-css', 'https://file.myfontastic.com/<mycode>/icons.css');

我已经将 fontastic me 上的图标名称设置为 'dashicons' 因为这样您可以直接在管理菜单中使用它们，例如

add_menu_page(
            'Page Title',
            'Menu Title',
            'Capability',
            'menu_slug',
            [ $this, 'call_back' ],
            'dashicons-custom-icon-name',
            1
        );

如果你给他们起别的名字，例如自定义图标你不能那么容易使用它们。

我也尝试过以其他方式排队，但问题与我在下面记录的相同。

有什么问题？

但是，通过这样做，我显然会覆盖/阻止/通常干扰 Wordpress 提供的现有 'dashicons' 库。

这意味着整个 Wordpress 中不在我的库中的任何 dashicons 都无法加载，我在它们的空间中留下了空方块。

如果能帮助我确定如何添加到 dashicons 库，而不是覆盖它，我将不胜感激。谢谢

Answer 1

解决此问题的方法是执行以下操作：

1) 返回 fontastic.me 并更改字体，使其不再是 'dashicons' 而是其他字体，例如'customicons'.

2) 从菜单功能中删除代码 'dashicons-custom-icon-name' - 让它默认为标准 'dashicons-admin-generic'.

3) 从 fontastic me 下载你的字体，然后用编辑器打开它——这样你就有了所有图标代码的参考——我在网站上找不到这些。

4) 将以下内容添加到您的样式中 sheet 为您想要定位的每个图标

#adminmenu li.toplevel_page_bnfo_database div.wp-menu-image.dashicons-admin-generic:before { // change 'menu_slug' to whatever your menu slug is
font-family: yourfont; // this needs to be whatever you called it on fontastic.me
content: ""; // Whichever icon you want to show.
}

为什么这不是一个完美的解决方案

这似乎比我最初追求的解决方案需要更多代码并且更麻烦。

但是，插件提供商（例如 WooCommerce）正在使用的解决方案可能是最好的选择。

将 fontastic.me 列为 'dashicons' 而不阻塞现有的 Wordpress dashicons

Enqueue fontastic.me as 'dashicons' without blocking existing Wordpress dashicons

css

php

wordpress

fontastic

dashicons