如何在元素中添加自定义小部件图标

Question

我正在为Wordpress中的Elementor编辑器开发一个自定义小部件。

我想设置自定义小部件图标，Elementor提供了get_ICON函数，我们必须返回类，该类包含：before伪元素，并在浏览器中呈现。

是否有任何方法可以使用png或任何其他格式将图标更新到Elementor小部件。

甚至我也试着用内容为空和背景图像的类。它不起作用了。

在Elementor中创建自定义小部件的文档：https://developers.elementor.com/creating-a-new-widget/

提前谢谢。

Answer 1

以下可以是解决方案。

添加了一个类并应用该类的背景图像。下面是css片段。

.elementor-element .icon .class-name:before {
    content: "";
    background-image: url(logo-name.png);
    height: 30px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

但问题是，它不支持Elementor中的光和暗背景。

相反，您可以从SVG文件创建字体，并使用@font-face为其创建自己的字体系列。

字体族的定义和使用

@font-face {
  font-family: 'aweber-font';
}

.logo {
  font-family: 'aweber-font' !important;
}
.logo:before {
   content: 'value';
}