Question 101614 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Elementor custom widget's icon doesn't display

Now I am going a WordPress lesson and do everything what teacher do on Youtube lesson. Just made custom widget in Elementor. But it is no icon in it.

Here is a pic

Here is a code inside of Widget. What I don’t understand?

/**
 * Get widget icon.
 *
 * Retrieve About widget icon.
 *
 * @since 1.0.0
 * @access public
 *
 * @return string Widget icon.
 */
public function get_icon() {
    return 'fa fa-code';
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Just figured out that such class as was in default "fa fa-code" doesn't work in Elementor. For Elementor works only "eicon-code" Here is all list:

    Elemetor icons

    For example this code will work:

    public function get_icon() {
    return 'eicon-code'; 
}

  2. 0

    the only way that I found to add a custom icon to the widget is you have to make your font icon(if you don’t want to use something like FontAwesome)
    and load it to your widget function file.
    (Tip: if the icon didn’t load correctly just add
    font-family:"the font family name of your icon" !important to the icon style file)

    enter image description here

    enter image description here

    enter image description here

    enter image description here

    the plugin file to load the style(the 4th picture): 

     <?php

/**
 * Plugin Name: DM Template Elementor Widget
 * Plugin URI: Plugin Author Link
 * Author: Plugin Author Name
 * Author URI: Plugin Author Link
 * Description: This plugin does wonders
 * Version: 0.1.0
 * License: 0.1.0
 * License URL: http://www.gnu.org/licenses/gpl-2.0.txt
 * text-domain: prefix-plugin-name
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

function my_plugin_frontend_stylesheets() {
    wp_register_style( 'frontend-style-1', plugins_url( '/css/style.css', __FILE__ ) );
    wp_enqueue_style( 'frontend-style-1' );
}

add_action( 'elementor/editor/after_enqueue_styles', 'my_plugin_frontend_stylesheets' );


/**
 * Register  Widget.
 *
 * Include widget file and register widget class.
 *
 * @since 1.0.0
 * @param ElementorWidgets_Manager $widgets_manager Elementor widgets manager.
 * @return void
 */

function register_dm_template_widget($widgets_manager) {

    require_once(__DIR__ . '/widgets/dm-hero-widget.php');

    $widgets_manager->register(new dm_template_hero_widget());
}
add_action('elementor/widgets/register', 'register_dm_template_widget');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search