Table of Contents
Elementor icon control displays a font icon select box field based on Font Awesome fonts. The control accepts include or exclude arguments to set a partial list of icons.
The control is defined in Control_Icon class which extends Base_Data_Control class.
Note that when using the control, the type should be set using the \Elementor\Controls_Manager::ICON constant.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
type |
string |
icon | The type of the control. |
label |
string |
The label that appears above of the field. | |
description |
string |
The description that appears below the field. | |
show_label |
bool |
true | Whether to display the label. |
label_block |
bool |
false | Whether to display the label in a separate line. |
separator |
string |
default | Set the position of the control separator. Available values are default, before, after and none. default will position the separator depending on the control type. before / after will position the separator before/after the control. none will hide the separator. |
options |
array |
get_icons() | An associative array of available icons. |
include |
array |
An array of icon classes to include in the options list. | |
exclude |
array |
An array of icon classes to exclude from the options list. | |
default |
string |
Default icon name. |
Return Value
(string) The selected icon CSS class.
Usage
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'icon',
[
'label' => __( 'Social Icons', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::ICON,
'include' => [
'fa fa-facebook',
'fa fa-flickr',
'fa fa-google-plus',
'fa fa-instagram',
'fa fa-linkedin',
'fa fa-pinterest',
'fa fa-reddit',
'fa fa-twitch',
'fa fa-twitter',
'fa fa-vimeo',
'fa fa-youtube',
],
'default' => 'fa fa-facebook',
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
echo '<i class="' . $settings['icon'] . '" aria-hidden="true"></i>';
}
protected function _content_template() {
?>
<i class="{{ settings.icon }}" aria-hidden="true"></i>
<?php
}
}