Как добавить пользовательский виджет ICON в elementor

Question

Я разрабатываю собственный виджет для редактора Elementor в Wordpress.

Я хочу установить пользовательский виджет ICON, Elementor предоставляет функцию get_icon, в которой мы должны вернуть класс, который имеет: before псевдоэлемент, и он отображает в браузере.

Есть ли способ использовать png или любые другие форматы для обновления ICON для виджета Elementor.

Даже я пытался используя класс с содержимым пустым и background-image. Это не работает.

Документ для создания собственного виджета в 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;
}

Но проблема в том, что он не будет поддерживать фон Light и Drak в Elementor.

Вместо этого вы можете создать шрифт из файла SVG и создайте для него собственное семейство шрифтов, используя @ font-face.

Определение семейства шрифтов и его использование

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

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