WordPress中的自定义svg管理菜单图标

Question

我真的指望你帮助我。我搜索了很多，发现没有解决方案。我想在管理菜单中为我的插件设置一个自定义图标，我希望它与配色方案很好地集成。

我看了https://codex.wordpress.org/Function_Reference/add_menu_page 在$icon_url

下

  

（WP 3.8+）如果＆＃39;数据：image / svg + xml; base64 ...＆＃39;，指定的SVG数据   image用作CSS背景

但是，如果我在那里放置一个SVG图标的URL，我得到的只是在其src属性中使用SVG的img，因此它根本不与颜色方案集成。它应该是一个CSS背景。

另外，我不明白这一点data:image/svg+xml;base64...这究竟是什么意思？

我尝试在$icon_url中嵌入内联SVG，但很明显，它不会起作用，但我只能尝试一下。

Dashicons不是一个选项，那里没有适合我项目的图标。

Answer 1

使用FontAwesome的逐步示例：

包括颜色和自定义帖子类型

1选择一个图标

• 转到：http://fontawesome.io/icons/
• 选择一个图标，我为此示例选择了“fa-flask”。

2获取SVG

• 转到：https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
• 找到图标，它将是没有fa前缀的名称 - 在我的情况下，就是“flask.svg”。
• 单击图标，然后在Github中单击“原始”

将SVG带入Wordpress

• 在您注册自定义帖子类型的functions.php内，添加以下代码段：

  add_action('init', 'my_init');
  function my_init() {
      register_post_type('labs', [
          'label' => 'Labs',
          // .. ect
          'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
       ]);
  }
  

重要说明：

• base64_encode的内容是Font Awesomes github页面中复制的原始字符串。
• 您需要在svg字符串中更改两个小东西：
  • 1：向路径/ s元素添加fill="black"属性 - 这允许通过Wordpress更改颜色。
  • 2 :(可选）将宽度和高度更改为20，因为这是管理员宽度/高度大小，并且似乎可以使结果更加清晰。

Answer 2

我通过分析Woocommerce获得了解决方案。如果没有为add_menu_page函数提供url，WordPress将使用默认的dashicon。所以它只是覆盖默认样式的问题。喜欢将此添加到管理员样式：

        #adminmenu #toplevel_page_yourpageid .menu-icon-generic div.wp-menu-image:before {
        font-family: your_font !important;
        content: '\eiconid';
        font-size: 1.3em!important;
    }

我在Icomoon上将svg转换为字体。

Answer 3

我想我应该添加以下内容：

要让SVG自动重新着色以匹配主题，需要设置填充属性。这是因为它通过脚本动态改变，否则它不知道要重新着色的部分。

Answer 4

在基础64中转换icondata之后，正确的方式就是这样;

“，”很重要

'data:image/svg+xml;base64,'.$icon_data_in_base64

Answer 5

svg文件必须设置fill属性才能生效。在像Atom这样的编辑器中打开svg文件，并确保它看起来像这样：

<path fill="black" d="....

你可以在那里放置任何你想要的颜色，WordPress使用JS根据管理主题自动更新填充值。

Answer 6

您必须将Base64编码图像（数据URI）粘贴到src ...

中

更多on Wikipedia。