Icon Control - Elementor Developers

Table of Contents

1 Arguments
2 Return Value
3 Usage

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
	}


}