如何在elementor中添加自定义小部件ICON答案

【问题标题】：How to add the custom widget ICON in elementor如何在elementor中添加自定义小部件ICON
【发布时间】：2020-08-11 05:31:53
【问题描述】：

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

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

有没有办法使用 png 或任何其他格式将 ICON 更新为 Elementor 小部件。

即使我尝试使用内容为空和背景图像的类。它不工作。

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

提前致谢。

【问题讨论】：

默认情况下你不能这样做，你可以做的一种方法是添加像mywidget-icon-1这样的类并使用css来设置背景图像。但有一件事是确保您在属性或更具体的选择器中使用! important 覆盖css

标签： php css wordpress elementor

【解决方案1】：

以下可以解决。

添加了一个类并为该类应用背景图像。下面是css sn-ps。

.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';
}

【讨论】：