elementor / includes / widgets / icon-box.php

icon-box.php in Elementor Website Builder – more than just a page builder 3.14.0-beta4, at includes/widgets/icon-box.php

772 lines 19.5 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor icon box widget.
13	*
14	* Elementor widget that displays an icon, a headline and a text.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Icon_Box extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve icon box widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'icon-box';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve icon box widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Icon Box', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve icon box widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-icon-box';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.1.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'icon box', 'icon' ];
74	}
75
76	/**
77	* Register icon box widget controls.
78	*
79	* Adds different input fields to allow the user to change and customize the widget settings.
80	*
81	* @since 3.1.0
82	* @access protected
83	*/
84	protected function register_controls() {
85	$this->start_controls_section(
86	'section_icon',
87	[
88	'label' => esc_html__( 'Icon Box', 'elementor' ),
89	]
90	);
91
92	$this->add_control(
93	'selected_icon',
94	[
95	'label' => esc_html__( 'Icon', 'elementor' ),
96	'type' => Controls_Manager::ICONS,
97	'fa4compatibility' => 'icon',
98	'default' => [
99	'value' => 'fas fa-star',
100	'library' => 'fa-solid',
101	],
102	]
103	);
104
105	$this->add_control(
106	'view',
107	[
108	'label' => esc_html__( 'View', 'elementor' ),
109	'type' => Controls_Manager::SELECT,
110	'options' => [
111	'default' => esc_html__( 'Default', 'elementor' ),
112	'stacked' => esc_html__( 'Stacked', 'elementor' ),
113	'framed' => esc_html__( 'Framed', 'elementor' ),
114	],
115	'default' => 'default',
116	'prefix_class' => 'elementor-view-',
117	]
118	);
119
120	$this->add_control(
121	'shape',
122	[
123	'label' => esc_html__( 'Shape', 'elementor' ),
124	'type' => Controls_Manager::SELECT,
125	'options' => [
126	'circle' => esc_html__( 'Circle', 'elementor' ),
127	'square' => esc_html__( 'Square', 'elementor' ),
128	],
129	'default' => 'circle',
130	'condition' => [
131	'view!' => 'default',
132	'selected_icon[value]!' => '',
133	],
134	'prefix_class' => 'elementor-shape-',
135	]
136	);
137
138	$this->add_control(
139	'title_text',
140	[
141	'label' => esc_html__( 'Title', 'elementor' ),
142	'type' => Controls_Manager::TEXT,
143	'dynamic' => [
144	'active' => true,
145	],
146	'default' => esc_html__( 'This is the heading', 'elementor' ),
147	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
148	'label_block' => true,
149	]
150	);
151
152	$this->add_control(
153	'description_text',
154	[
155	'label' => esc_html__( 'Description', 'elementor' ),
156	'type' => Controls_Manager::TEXTAREA,
157	'dynamic' => [
158	'active' => true,
159	],
160	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
161	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
162	'rows' => 10,
163	]
164	);
165
166	$this->add_control(
167	'link',
168	[
169	'label' => esc_html__( 'Link', 'elementor' ),
170	'type' => Controls_Manager::URL,
171	'dynamic' => [
172	'active' => true,
173	],
174	'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
175	'separator' => 'before',
176	]
177	);
178
179	$this->add_responsive_control(
180	'position',
181	[
182	'label' => esc_html__( 'Icon Position', 'elementor' ),
183	'type' => Controls_Manager::CHOOSE,
184	'mobile_default' => 'top',
185	'options' => [
186	'left' => [
187	'title' => esc_html__( 'Left', 'elementor' ),
188	'icon' => 'eicon-h-align-left',
189	],
190	'top' => [
191	'title' => esc_html__( 'Top', 'elementor' ),
192	'icon' => 'eicon-v-align-top',
193	],
194	'right' => [
195	'title' => esc_html__( 'Right', 'elementor' ),
196	'icon' => 'eicon-h-align-right',
197	],
198	],
199	'prefix_class' => 'elementor%s-position-',
200	'conditions' => [
201	'relation' => 'or',
202	'terms' => [
203	[
204	'name' => 'selected_icon[value]',
205	'operator' => '!=',
206	'value' => '',
207	],
208	],
209	],
210	]
211	);
212
213	$this->add_control(
214	'title_size',
215	[
216	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
217	'type' => Controls_Manager::SELECT,
218	'options' => [
219	'h1' => 'H1',
220	'h2' => 'H2',
221	'h3' => 'H3',
222	'h4' => 'H4',
223	'h5' => 'H5',
224	'h6' => 'H6',
225	'div' => 'div',
226	'span' => 'span',
227	'p' => 'p',
228	],
229	'default' => 'h3',
230	]
231	);
232
233	$this->end_controls_section();
234
235	$this->start_controls_section(
236	'section_style_icon',
237	[
238	'label' => esc_html__( 'Icon', 'elementor' ),
239	'tab' => Controls_Manager::TAB_STYLE,
240	'conditions' => [
241	'relation' => 'or',
242	'terms' => [
243	[
244	'name' => 'selected_icon[value]',
245	'operator' => '!=',
246	'value' => '',
247	],
248	],
249	],
250	]
251	);
252
253	$this->start_controls_tabs( 'icon_colors' );
254
255	$this->start_controls_tab(
256	'icon_colors_normal',
257	[
258	'label' => esc_html__( 'Normal', 'elementor' ),
259	]
260	);
261
262	$this->add_control(
263	'primary_color',
264	[
265	'label' => esc_html__( 'Primary Color', 'elementor' ),
266	'type' => Controls_Manager::COLOR,
267	'global' => [
268	'default' => Global_Colors::COLOR_PRIMARY,
269	],
270	'default' => '',
271	'selectors' => [
272	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
273	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
274	],
275	]
276	);
277
278	$this->add_control(
279	'secondary_color',
280	[
281	'label' => esc_html__( 'Secondary Color', 'elementor' ),
282	'type' => Controls_Manager::COLOR,
283	'default' => '',
284	'condition' => [
285	'view!' => 'default',
286	],
287	'selectors' => [
288	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
289	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
290	],
291	]
292	);
293
294	$this->end_controls_tab();
295
296	$this->start_controls_tab(
297	'icon_colors_hover',
298	[
299	'label' => esc_html__( 'Hover', 'elementor' ),
300	]
301	);
302
303	$this->add_control(
304	'hover_primary_color',
305	[
306	'label' => esc_html__( 'Primary Color', 'elementor' ),
307	'type' => Controls_Manager::COLOR,
308	'default' => '',
309	'selectors' => [
310	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
311	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
312	],
313	]
314	);
315
316	$this->add_control(
317	'hover_secondary_color',
318	[
319	'label' => esc_html__( 'Secondary Color', 'elementor' ),
320	'type' => Controls_Manager::COLOR,
321	'default' => '',
322	'condition' => [
323	'view!' => 'default',
324	],
325	'selectors' => [
326	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
327	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
328	],
329	]
330	);
331
332	$this->add_control(
333	'hover_animation',
334	[
335	'label' => esc_html__( 'Hover Animation', 'elementor' ),
336	'type' => Controls_Manager::HOVER_ANIMATION,
337	]
338	);
339
340	$this->end_controls_tab();
341
342	$this->end_controls_tabs();
343
344	$this->add_responsive_control(
345	'icon_space',
346	[
347	'label' => esc_html__( 'Spacing', 'elementor' ),
348	'type' => Controls_Manager::SLIDER,
349	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
350	'default' => [
351	'size' => 15,
352	],
353	'range' => [
354	'px' => [
355	'min' => 0,
356	'max' => 100,
357	],
358	],
359	'selectors' => [
360	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
361	],
362	]
363	);
364
365	$this->add_responsive_control(
366	'icon_size',
367	[
368	'label' => esc_html__( 'Size', 'elementor' ),
369	'type' => Controls_Manager::SLIDER,
370	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
371	'range' => [
372	'px' => [
373	'min' => 6,
374	'max' => 300,
375	],
376	],
377	'selectors' => [
378	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
379	],
380	]
381	);
382
383	$this->add_responsive_control(
384	'icon_padding',
385	[
386	'label' => esc_html__( 'Padding', 'elementor' ),
387	'type' => Controls_Manager::SLIDER,
388	'selectors' => [
389	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
390	],
391	'range' => [
392	'em' => [
393	'min' => 0,
394	'max' => 5,
395	],
396	],
397	'condition' => [
398	'view!' => 'default',
399	],
400	]
401	);
402
403	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
404
405	$rotate_device_args = [];
406
407	$rotate_device_settings = [
408	'default' => [
409	'unit' => 'deg',
410	],
411	];
412
413	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
414	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
415	}
416
417	$this->add_responsive_control(
418	'rotate',
419	[
420	'label' => esc_html__( 'Rotate', 'elementor' ),
421	'type' => Controls_Manager::SLIDER,
422	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
423	'default' => [
424	'unit' => 'deg',
425	],
426	'tablet_default' => [
427	'unit' => 'deg',
428	],
429	'mobile_default' => [
430	'unit' => 'deg',
431	],
432	'device_args' => $rotate_device_args,
433	'selectors' => [
434	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
435	],
436	]
437	);
438
439	$this->add_responsive_control(
440	'border_width',
441	[
442	'label' => esc_html__( 'Border Width', 'elementor' ),
443	'type' => Controls_Manager::DIMENSIONS,
444	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
445	'selectors' => [
446	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
447	],
448	'condition' => [
449	'view' => 'framed',
450	],
451	]
452	);
453
454	$this->add_responsive_control(
455	'border_radius',
456	[
457	'label' => esc_html__( 'Border Radius', 'elementor' ),
458	'type' => Controls_Manager::DIMENSIONS,
459	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
460	'selectors' => [
461	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
462	],
463	'condition' => [
464	'view!' => 'default',
465	],
466	]
467	);
468
469	$this->end_controls_section();
470
471	$this->start_controls_section(
472	'section_style_content',
473	[
474	'label' => esc_html__( 'Content', 'elementor' ),
475	'tab' => Controls_Manager::TAB_STYLE,
476	]
477	);
478
479	$this->add_responsive_control(
480	'text_align',
481	[
482	'label' => esc_html__( 'Alignment', 'elementor' ),
483	'type' => Controls_Manager::CHOOSE,
484	'options' => [
485	'left' => [
486	'title' => esc_html__( 'Left', 'elementor' ),
487	'icon' => 'eicon-text-align-left',
488	],
489	'center' => [
490	'title' => esc_html__( 'Center', 'elementor' ),
491	'icon' => 'eicon-text-align-center',
492	],
493	'right' => [
494	'title' => esc_html__( 'Right', 'elementor' ),
495	'icon' => 'eicon-text-align-right',
496	],
497	'justify' => [
498	'title' => esc_html__( 'Justified', 'elementor' ),
499	'icon' => 'eicon-text-align-justify',
500	],
501	],
502	'selectors' => [
503	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
504	],
505	]
506	);
507
508	$this->add_control(
509	'content_vertical_alignment',
510	[
511	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
512	'type' => Controls_Manager::CHOOSE,
513	'options' => [
514	'top' => [
515	'title' => esc_html__( 'Top', 'elementor' ),
516	'icon' => 'eicon-v-align-top',
517	],
518	'middle' => [
519	'title' => esc_html__( 'Middle', 'elementor' ),
520	'icon' => 'eicon-v-align-middle',
521	],
522	'bottom' => [
523	'title' => esc_html__( 'Bottom', 'elementor' ),
524	'icon' => 'eicon-v-align-bottom',
525	],
526	],
527	'default' => 'top',
528	'toggle' => false,
529	'prefix_class' => 'elementor-vertical-align-',
530	]
531	);
532
533	$this->add_control(
534	'heading_title',
535	[
536	'label' => esc_html__( 'Title', 'elementor' ),
537	'type' => Controls_Manager::HEADING,
538	'separator' => 'before',
539	]
540	);
541
542	$this->add_responsive_control(
543	'title_bottom_space',
544	[
545	'label' => esc_html__( 'Spacing', 'elementor' ),
546	'type' => Controls_Manager::SLIDER,
547	'range' => [
548	'px' => [
549	'min' => 0,
550	'max' => 100,
551	],
552	],
553	'selectors' => [
554	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
555	],
556	]
557	);
558
559	$this->add_control(
560	'title_color',
561	[
562	'label' => esc_html__( 'Color', 'elementor' ),
563	'type' => Controls_Manager::COLOR,
564	'default' => '',
565	'selectors' => [
566	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
567	],
568	'global' => [
569	'default' => Global_Colors::COLOR_PRIMARY,
570	],
571	]
572	);
573
574	$this->add_group_control(
575	Group_Control_Typography::get_type(),
576	[
577	'name' => 'title_typography',
578	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
579	'global' => [
580	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
581	],
582	]
583	);
584
585	$this->add_group_control(
586	Group_Control_Text_Stroke::get_type(),
587	[
588	'name' => 'text_stroke',
589	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
590	]
591	);
592
593	$this->add_group_control(
594	Group_Control_Text_Shadow::get_type(),
595	[
596	'name' => 'title_shadow',
597	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
598	]
599	);
600
601	$this->add_control(
602	'heading_description',
603	[
604	'label' => esc_html__( 'Description', 'elementor' ),
605	'type' => Controls_Manager::HEADING,
606	'separator' => 'before',
607	]
608	);
609
610	$this->add_control(
611	'description_color',
612	[
613	'label' => esc_html__( 'Color', 'elementor' ),
614	'type' => Controls_Manager::COLOR,
615	'default' => '',
616	'selectors' => [
617	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
618	],
619	'global' => [
620	'default' => Global_Colors::COLOR_TEXT,
621	],
622	]
623	);
624
625	$this->add_group_control(
626	Group_Control_Typography::get_type(),
627	[
628	'name' => 'description_typography',
629	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
630	'global' => [
631	'default' => Global_Typography::TYPOGRAPHY_TEXT,
632	],
633	]
634	);
635
636	$this->add_group_control(
637	Group_Control_Text_Shadow::get_type(),
638	[
639	'name' => 'description_shadow',
640	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
641	]
642	);
643
644	$this->end_controls_section();
645	}
646
647	/**
648	* Render icon box widget output on the frontend.
649	*
650	* Written in PHP and used to generate the final HTML.
651	*
652	* @since 1.0.0
653	* @access protected
654	*/
655	protected function render() {
656	$settings = $this->get_settings_for_display();
657
658	$this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
659
660	$icon_tag = 'span';
661
662	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
663	// add old default
664	$settings['icon'] = 'fa fa-star';
665	}
666
667	$has_icon = ! empty( $settings['icon'] );
668
669	if ( ! empty( $settings['link']['url'] ) ) {
670	$icon_tag = 'a';
671
672	$this->add_link_attributes( 'link', $settings['link'] );
673	}
674
675	if ( $has_icon ) {
676	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
677	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
678	}
679
680	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
681
682	$this->add_inline_editing_attributes( 'title_text', 'none' );
683	$this->add_inline_editing_attributes( 'description_text' );
684	if ( ! $has_icon && ! empty( $settings['selected_icon']['value'] ) ) {
685	$has_icon = true;
686	}
687	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
688	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
689
690	?>
691	<div class="elementor-icon-box-wrapper">
692	<?php if ( $has_icon ) : ?>
693	<div class="elementor-icon-box-icon">
694	<<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>>
695	<?php
696	if ( $is_new \|\| $migrated ) {
697	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
698	} elseif ( ! empty( $settings['icon'] ) ) {
699	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
700	}
701	?>
702	</<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
703	</div>
704	<?php endif; ?>
705	<div class="elementor-icon-box-content">
706	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
707	<<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
708	<?php $this->print_unescaped_setting( 'title_text' ); ?>
709	</<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
710	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
711	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
712	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
713	<?php $this->print_unescaped_setting( 'description_text' ); ?>
714	</p>
715	<?php endif; ?>
716	</div>
717	</div>
718	<?php
719	}
720
721	/**
722	* Render icon box widget output in the editor.
723	*
724	* Written as a Backbone JavaScript template and used to generate the live preview.
725	*
726	* @since 2.9.0
727	* @access protected
728	*/
729	protected function content_template() {
730	?>
731	<#
732	var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
733	iconTag = link ? 'a' : 'span',
734	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
735	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
736
737	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
738
739	view.addInlineEditingAttributes( 'title_text', 'none' );
740	view.addInlineEditingAttributes( 'description_text' );
741	#>
742	<div class="elementor-icon-box-wrapper">
743	<?php // settings.icon is needed for older version ?>
744	<# if ( settings.icon \|\| settings.selected_icon.value ) { #>
745	<div class="elementor-icon-box-icon">
746	<{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
747	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
748	{{{ iconHTML.value }}}
749	<# } else { #>
750	<i class="{{ settings.icon }}" aria-hidden="true"></i>
751	<# } #>
752	</{{{ iconTag }}}>
753	</div>
754	<# } #>
755	<div class="elementor-icon-box-content">
756	<# var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); #>
757	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
758	<{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
759	</{{{ titleSizeTag }}}>
760	<# if ( settings.description_text ) { #>
761	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
762	<# } #>
763	</div>
764	</div>
765	<?php
766	}
767
768	public function on_import( $element ) {
769	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
770	}
771	}
772