图标控件

Elementor 图标控件显示图标选择器。此外，它能够从 Elementor 的“图标库”中选择现有图标，或“上传 SVG”到 WordPress 媒体库。

该控件在继承 Control_Base_Multiple 类的 Control_Icons 类中定义。

使用此控件时，应将 type 设置为 \Elementor\Controls_Manager::ICONS 常量。

参数

名称	类型	默认值	描述
`type`	`string`	icons	控件的类型。
`label`	`string`		显示在字段上方的标签。
`description`	`string`		显示在字段下方的描述。
`show_label`	`bool`	true	是否显示标签。
`label_block`	`bool`	false	是否在单独一行显示标签。
`separator`	`string`	default
`default`	`array`		默认值设置为一个包含值和库的数组。
`fa4compatibility`	`string`		用于从旧的图标控件迁移数据，应设置为旧控件的名称。
`recommended`	`array`		用于设置此控件实例的推荐图标。
`skin`	`string`	media	用于更改控件的外观。有两个选项：`media` 或 `inline`。inline 皮肤的设计基于选择控件。
`exclude_inline_options`	`array`		仅与 `inline` 皮肤一起使用，用于从内联图标控件的按钮中隐藏一个选项（图标库/SVG）。

Return Value

[
	'value' => '',
	'library' => '',
]

(array) An array containing icon data:

$value (string) Icon value.
$library (string) Icon library name.

Usage

<?php
class Icons_Elementor_Test_Control_Widget extends \Elementor\Widget_Base {

	public function get_name(): string {
		return 'icons_test_widget';
	}

	public function get_title(): string {
		return esc_html__( 'Icons Test Widget', 'textdomain' );
	}

	protected function register_controls(): void {

		$this->start_controls_section(
			'section_icon',
			[
				'label' => esc_html__( 'Icon', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'icon',
			[
				'label' => esc_html__( 'Icon', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::ICONS,
				'default' => [
					'value' => 'fas fa-circle',
					'library' => 'fa-solid',
				],
				'recommended' => [
					'fa-solid' => [
						'circle',
						'dot-circle',
						'square-full',
					],
					'fa-regular' => [
						'circle',
						'dot-circle',
						'square-full',
					],
				],
			]
		);

		$this->end_controls_section();

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();
		?>
		<div class="my-icon-wrapper">
			<?php \Elementor\Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] ); ?>
		</div>
		<?php
	}

	protected function content_template(): void {
		?>
		<#
		const iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' );
		#>
		<div class="my-icon-wrapper">
			{{{ iconHTML.value }}}
		</div>
		<?php
	}

}

这篇文档对你有帮助吗？