时间戳

首页 > 解决方案 > 如何在elementor中添加自定义小部件ICON

php - 如何在elementor中添加自定义小部件ICON

问题描述

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

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

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

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

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

提前致谢。

标签： phpcsswordpresselementor

解决方案

以下可以作为解决方案。

添加了一个类并为该类应用背景图像。下面是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';
}

推荐阅读