title: "图标控件" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Editor Controls - Src - Repos

图标控件

Icons Control

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 {22-44,53-55,61-66}

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
}

} ```