WordPress中的自定义svg管理菜单图标 [英] Custom svg admin menu icon in WordPress

问题描述

在这一方面，我真的指望您的帮助.我进行了很多搜索，没有找到解决方案.我想在管理菜单中为我的插件添加自定义图标，并且希望它与配色方案很好地集成在一起.

I'm really counting on your help in this one. I searched a lot and found no solution. I want to have a custom icon for my plugin in admin menu, and I want it to integrate well with the color scheme.

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

(WP 3.8+)如果为'data:image/svg + xml; base64 ...'，则为指定的SVG数据 图片用作CSS背景

(WP 3.8+) If 'data:image/svg+xml;base64...', the specified SVG data image is used as a CSS background

但是，如果我在其中将URL放置到SVG图标上，则得到的只是src属性中包含SVG的img，因此它根本不与配色方案集成.应该是CSS背景.

However, if I put a URL to an SVG icon there, all I get is an img with SVG in its src attribute, so it doesn't integrate at all with the color scheme. It's supposed to be a CSS background.

另外，我不理解这个data:image/svg+xml;base64...到底是什么意思?

Also, I don't understand this data:image/svg+xml;base64... What does it mean exactly?

我尝试将嵌入式SVG嵌入到$icon_url中，但是显然，它行不通，但我只需要尝试一下.

I tried embedding inline SVG in the $icon_url but obviously, it won't work, but I just had to try it.

不能使用Dashicon，那里没有适合我的项目的图标.

Dashicons are not an option, there's no icon there suitable for my project.

推荐答案

我通过分析Woocommerce获得了解决方案.如果没有URL提供给add_menu_page函数，则WordPress将使用默认的破折号.因此，这只是覆盖默认样式的问题.像将其添加到管理样式中一样:

I got the solution by analyzing Woocommerce. If no url is supplied to the add_menu_page function, WordPress uses the default dashicon. So it's just a matter of overriding the default style. Like add this to admin styles:

#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转换为字体.

I converted svg to font on Icomoon.

这篇关于WordPress中的自定义svg管理菜单图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！