Question

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

我想设置自定义窗口小部件ICON，Elementor提供get_icon函数，因为我们必须返回具有：before伪元素并在浏览器中呈现的类。

是否可以使用png或任何其他格式将ICON更新为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中的Light和Drak背景。

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

定义字体系列并使用它

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

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

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

1 个答案: