elementor / includes / widgets / icon-box.php

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

837 lines 20.9 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	'condition' => [
118	'selected_icon[value]!' => '',
119	],
120	]
121	);
122
123	$this->add_control(
124	'shape',
125	[
126	'label' => esc_html__( 'Shape', 'elementor' ),
127	'type' => Controls_Manager::SELECT,
128	'options' => [
129	'circle' => esc_html__( 'Circle', 'elementor' ),
130	'square' => esc_html__( 'Square', 'elementor' ),
131	],
132	'default' => 'circle',
133	'condition' => [
134	'view!' => 'default',
135	'selected_icon[value]!' => '',
136	],
137	'prefix_class' => 'elementor-shape-',
138	]
139	);
140
141	$this->add_control(
142	'title_text',
143	[
144	'label' => esc_html__( 'Title', 'elementor' ),
145	'type' => Controls_Manager::TEXT,
146	'dynamic' => [
147	'active' => true,
148	],
149	'default' => esc_html__( 'This is the heading', 'elementor' ),
150	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
151	'label_block' => true,
152	]
153	);
154
155	$this->add_control(
156	'description_text',
157	[
158	'label' => esc_html__( 'Description', 'elementor' ),
159	'type' => Controls_Manager::TEXTAREA,
160	'dynamic' => [
161	'active' => true,
162	],
163	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
164	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
165	'rows' => 10,
166	]
167	);
168
169	$this->add_control(
170	'link',
171	[
172	'label' => esc_html__( 'Link', 'elementor' ),
173	'type' => Controls_Manager::URL,
174	'dynamic' => [
175	'active' => true,
176	],
177	'separator' => 'before',
178	]
179	);
180
181	$this->add_control(
182	'title_size',
183	[
184	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
185	'type' => Controls_Manager::SELECT,
186	'options' => [
187	'h1' => 'H1',
188	'h2' => 'H2',
189	'h3' => 'H3',
190	'h4' => 'H4',
191	'h5' => 'H5',
192	'h6' => 'H6',
193	'div' => 'div',
194	'span' => 'span',
195	'p' => 'p',
196	],
197	'default' => 'h3',
198	]
199	);
200
201	$this->end_controls_section();
202
203	$this->start_controls_section(
204	'section_style_box',
205	[
206	'label' => esc_html__( 'Box', 'elementor' ),
207	'tab' => Controls_Manager::TAB_STYLE,
208	]
209	);
210
211	$this->add_responsive_control(
212	'position',
213	[
214	'label' => esc_html__( 'Icon Position', 'elementor' ),
215	'type' => Controls_Manager::CHOOSE,
216	'default' => 'top',
217	'mobile_default' => 'top',
218	'options' => [
219	'left' => [
220	'title' => esc_html__( 'Left', 'elementor' ),
221	'icon' => 'eicon-h-align-left',
222	],
223	'top' => [
224	'title' => esc_html__( 'Top', 'elementor' ),
225	'icon' => 'eicon-v-align-top',
226	],
227	'right' => [
228	'title' => esc_html__( 'Right', 'elementor' ),
229	'icon' => 'eicon-h-align-right',
230	],
231	],
232	'prefix_class' => 'elementor%s-position-',
233	'condition' => [
234	'selected_icon[value]!' => '',
235	],
236	]
237	);
238
239	$this->add_responsive_control(
240	'content_vertical_alignment',
241	[
242	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
243	'type' => Controls_Manager::CHOOSE,
244	'options' => [
245	'top' => [
246	'title' => esc_html__( 'Top', 'elementor' ),
247	'icon' => 'eicon-v-align-top',
248	],
249	'middle' => [
250	'title' => esc_html__( 'Middle', 'elementor' ),
251	'icon' => 'eicon-v-align-middle',
252	],
253	'bottom' => [
254	'title' => esc_html__( 'Bottom', 'elementor' ),
255	'icon' => 'eicon-v-align-bottom',
256	],
257	],
258	'default' => 'top',
259	'toggle' => false,
260	'prefix_class' => 'elementor-vertical-align-',
261	'condition' => [
262	'position!' => 'top',
263	],
264	]
265	);
266
267	$this->add_responsive_control(
268	'text_align',
269	[
270	'label' => esc_html__( 'Alignment', 'elementor' ),
271	'type' => Controls_Manager::CHOOSE,
272	'options' => [
273	'left' => [
274	'title' => esc_html__( 'Left', 'elementor' ),
275	'icon' => 'eicon-text-align-left',
276	],
277	'center' => [
278	'title' => esc_html__( 'Center', 'elementor' ),
279	'icon' => 'eicon-text-align-center',
280	],
281	'right' => [
282	'title' => esc_html__( 'Right', 'elementor' ),
283	'icon' => 'eicon-text-align-right',
284	],
285	'justify' => [
286	'title' => esc_html__( 'Justified', 'elementor' ),
287	'icon' => 'eicon-text-align-justify',
288	],
289	],
290	'selectors' => [
291	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
292	],
293	'separator' => 'after',
294	]
295	);
296
297	$this->add_responsive_control(
298	'icon_space',
299	[
300	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
301	'type' => Controls_Manager::SLIDER,
302	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
303	'default' => [
304	'size' => 15,
305	],
306	'range' => [
307	'px' => [
308	'max' => 100,
309	],
310	'em' => [
311	'max' => 10,
312	],
313	'rem' => [
314	'max' => 10,
315	],
316	],
317	'selectors' => [
318	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
319	],
320	'condition' => [
321	'selected_icon[value]!' => '',
322	],
323	]
324	);
325
326	$this->add_responsive_control(
327	'title_bottom_space',
328	[
329	'label' => esc_html__( 'Content Spacing', 'elementor' ),
330	'type' => Controls_Manager::SLIDER,
331	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
332	'range' => [
333	'px' => [
334	'max' => 100,
335	],
336	'em' => [
337	'min' => 0,
338	'max' => 10,
339	],
340	'rem' => [
341	'min' => 0,
342	'max' => 10,
343	],
344	],
345	'selectors' => [
346	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
347	],
348	]
349	);
350
351	$this->end_controls_section();
352
353	$this->start_controls_section(
354	'section_style_icon',
355	[
356	'label' => esc_html__( 'Icon', 'elementor' ),
357	'tab' => Controls_Manager::TAB_STYLE,
358	'condition' => [
359	'selected_icon[value]!' => '',
360	],
361	]
362	);
363
364	$this->start_controls_tabs( 'icon_colors' );
365
366	$this->start_controls_tab(
367	'icon_colors_normal',
368	[
369	'label' => esc_html__( 'Normal', 'elementor' ),
370	]
371	);
372
373	$this->add_control(
374	'primary_color',
375	[
376	'label' => esc_html__( 'Primary Color', 'elementor' ),
377	'type' => Controls_Manager::COLOR,
378	'global' => [
379	'default' => Global_Colors::COLOR_PRIMARY,
380	],
381	'default' => '',
382	'selectors' => [
383	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
384	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
385	],
386	]
387	);
388
389	$this->add_control(
390	'secondary_color',
391	[
392	'label' => esc_html__( 'Secondary Color', 'elementor' ),
393	'type' => Controls_Manager::COLOR,
394	'default' => '',
395	'condition' => [
396	'view!' => 'default',
397	],
398	'selectors' => [
399	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
400	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
401	],
402	]
403	);
404
405	$this->end_controls_tab();
406
407	$this->start_controls_tab(
408	'icon_colors_hover',
409	[
410	'label' => esc_html__( 'Hover', 'elementor' ),
411	]
412	);
413
414	$this->add_control(
415	'hover_primary_color',
416	[
417	'label' => esc_html__( 'Primary Color', 'elementor' ),
418	'type' => Controls_Manager::COLOR,
419	'default' => '',
420	'selectors' => [
421	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
422	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
423	],
424	]
425	);
426
427	$this->add_control(
428	'hover_secondary_color',
429	[
430	'label' => esc_html__( 'Secondary Color', 'elementor' ),
431	'type' => Controls_Manager::COLOR,
432	'default' => '',
433	'condition' => [
434	'view!' => 'default',
435	],
436	'selectors' => [
437	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
438	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
439	],
440	]
441	);
442
443	$this->add_control(
444	'hover_animation',
445	[
446	'label' => esc_html__( 'Hover Animation', 'elementor' ),
447	'type' => Controls_Manager::HOVER_ANIMATION,
448	]
449	);
450
451	$this->end_controls_tab();
452
453	$this->end_controls_tabs();
454
455	$this->add_responsive_control(
456	'icon_size',
457	[
458	'label' => esc_html__( 'Size', 'elementor' ),
459	'type' => Controls_Manager::SLIDER,
460	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
461	'range' => [
462	'px' => [
463	'min' => 6,
464	'max' => 300,
465	],
466	],
467	'selectors' => [
468	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
469	],
470	]
471	);
472
473	$this->add_responsive_control(
474	'icon_padding',
475	[
476	'label' => esc_html__( 'Padding', 'elementor' ),
477	'type' => Controls_Manager::SLIDER,
478	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
479	'selectors' => [
480	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
481	],
482	'range' => [
483	'px' => [
484	'max' => 50,
485	],
486	'em' => [
487	'min' => 0,
488	'max' => 5,
489	],
490	'rem' => [
491	'min' => 0,
492	'max' => 5,
493	],
494	],
495	'condition' => [
496	'view!' => 'default',
497	],
498	]
499	);
500
501	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
502
503	$rotate_device_args = [];
504
505	$rotate_device_settings = [
506	'default' => [
507	'unit' => 'deg',
508	],
509	];
510
511	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
512	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
513	}
514
515	$this->add_responsive_control(
516	'rotate',
517	[
518	'label' => esc_html__( 'Rotate', 'elementor' ),
519	'type' => Controls_Manager::SLIDER,
520	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
521	'default' => [
522	'unit' => 'deg',
523	],
524	'tablet_default' => [
525	'unit' => 'deg',
526	],
527	'mobile_default' => [
528	'unit' => 'deg',
529	],
530	'device_args' => $rotate_device_args,
531	'selectors' => [
532	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
533	],
534	]
535	);
536
537	$this->add_responsive_control(
538	'border_width',
539	[
540	'label' => esc_html__( 'Border Width', 'elementor' ),
541	'type' => Controls_Manager::DIMENSIONS,
542	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
543	'selectors' => [
544	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
545	],
546	'condition' => [
547	'view' => 'framed',
548	],
549	]
550	);
551
552	$this->add_responsive_control(
553	'border_radius',
554	[
555	'label' => esc_html__( 'Border Radius', 'elementor' ),
556	'type' => Controls_Manager::DIMENSIONS,
557	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
558	'selectors' => [
559	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
560	],
561	'condition' => [
562	'view!' => 'default',
563	],
564	'separator' => 'before',
565	]
566	);
567
568	$this->end_controls_section();
569
570	$this->start_controls_section(
571	'section_style_content',
572	[
573	'label' => esc_html__( 'Content', 'elementor' ),
574	'tab' => Controls_Manager::TAB_STYLE,
575	]
576	);
577
578	$this->add_control(
579	'heading_title',
580	[
581	'label' => esc_html__( 'Title', 'elementor' ),
582	'type' => Controls_Manager::HEADING,
583	'separator' => 'before',
584	]
585	);
586
587	$this->add_control(
588	'title_color',
589	[
590	'label' => esc_html__( 'Color', 'elementor' ),
591	'type' => Controls_Manager::COLOR,
592	'default' => '',
593	'selectors' => [
594	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
595	],
596	'global' => [
597	'default' => Global_Colors::COLOR_PRIMARY,
598	],
599	]
600	);
601
602	$this->add_group_control(
603	Group_Control_Typography::get_type(),
604	[
605	'name' => 'title_typography',
606	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
607	'global' => [
608	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
609	],
610	]
611	);
612
613	$this->add_group_control(
614	Group_Control_Text_Stroke::get_type(),
615	[
616	'name' => 'text_stroke',
617	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
618	]
619	);
620
621	$this->add_group_control(
622	Group_Control_Text_Shadow::get_type(),
623	[
624	'name' => 'title_shadow',
625	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
626	]
627	);
628
629	$this->add_control(
630	'heading_description',
631	[
632	'label' => esc_html__( 'Description', 'elementor' ),
633	'type' => Controls_Manager::HEADING,
634	'separator' => 'before',
635	]
636	);
637
638	$this->add_control(
639	'description_color',
640	[
641	'label' => esc_html__( 'Color', 'elementor' ),
642	'type' => Controls_Manager::COLOR,
643	'default' => '',
644	'selectors' => [
645	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
646	],
647	'global' => [
648	'default' => Global_Colors::COLOR_TEXT,
649	],
650	]
651	);
652
653	$this->add_group_control(
654	Group_Control_Typography::get_type(),
655	[
656	'name' => 'description_typography',
657	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
658	'global' => [
659	'default' => Global_Typography::TYPOGRAPHY_TEXT,
660	],
661	]
662	);
663
664	$this->add_group_control(
665	Group_Control_Text_Shadow::get_type(),
666	[
667	'name' => 'description_shadow',
668	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
669	]
670	);
671
672	$this->end_controls_section();
673	}
674
675	/**
676	* Render icon box widget output on the frontend.
677	*
678	* Written in PHP and used to generate the final HTML.
679	*
680	* @since 1.0.0
681	* @access protected
682	*/
683	protected function render() {
684	$settings = $this->get_settings_for_display();
685	$has_link = ! empty( $settings['link']['url'] );
686	$html_tag = $has_link ? 'a' : 'span';
687
688	$this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
689
690	$has_icon = ! empty( $settings['selected_icon']['value'] );
691	$has_content = ! Utils::is_empty( $settings['title_text'] ) \|\| ! Utils::is_empty( $settings['description_text'] );
692
693	if ( ! $has_icon && ! $has_content ) {
694	return;
695	}
696
697	if ( $has_link ) {
698	$this->add_link_attributes( 'link', $settings['link'] );
699	$this->add_render_attribute( 'icon', 'tabindex', '-1' );
700	}
701
702	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
703	// add old default
704	$settings['icon'] = 'fa fa-star';
705	}
706
707	if ( ! empty( $settings['icon'] ) ) {
708	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
709	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
710	}
711
712	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
713
714	$this->add_inline_editing_attributes( 'title_text', 'none' );
715	$this->add_inline_editing_attributes( 'description_text' );
716
717	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
718	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
719	?>
720	<div class="elementor-icon-box-wrapper">
721
722	<?php if ( $has_icon ) : ?>
723	<div class="elementor-icon-box-icon">
724	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>>
725	<?php
726	if ( $is_new \|\| $migrated ) {
727	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
728	} elseif ( ! empty( $settings['icon'] ) ) {
729	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
730	}
731	?>
732	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
733	</div>
734	<?php endif; ?>
735
736	<?php if ( $has_content ) : ?>
737	<div class="elementor-icon-box-content">
738
739	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
740	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
741	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
742	<?php $this->print_unescaped_setting( 'title_text' ); ?>
743	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
744	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
745	<?php endif; ?>
746
747	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
748	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
749	<?php $this->print_unescaped_setting( 'description_text' ); ?>
750	</p>
751	<?php endif; ?>
752
753	</div>
754	<?php endif; ?>
755
756	</div>
757	<?php
758	}
759
760	/**
761	* Render icon box widget output in the editor.
762	*
763	* Written as a Backbone JavaScript template and used to generate the live preview.
764	*
765	* @since 2.9.0
766	* @access protected
767	*/
768	protected function content_template() {
769	?>
770	<#
771	// For older version `settings.icon` is needed.
772	var hasIcon = settings.icon \|\| settings.selected_icon.value;
773	var hasContent = settings.title_text \|\| settings.description_text;
774
775	if ( ! hasIcon && ! hasContent ) {
776	return;
777	}
778
779	var hasLink = settings.link.url,
780	htmlTag = hasLink ? 'a' : 'span',
781	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
782	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
783	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
784
785	view.addRenderAttribute( 'icon', 'class', 'elementor-icon elementor-animation-' + settings.hover_animation );
786
787	if ( hasLink ) {
788	view.addRenderAttribute( 'link', 'href', settings.link.url );
789	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
790	}
791
792	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
793
794	view.addInlineEditingAttributes( 'title_text', 'none' );
795	view.addInlineEditingAttributes( 'description_text' );
796	#>
797	<div class="elementor-icon-box-wrapper">
798
799	<# if ( hasIcon ) { #>
800	<div class="elementor-icon-box-icon">
801	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
802	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
803	{{{ iconHTML.value }}}
804	<# } else { #>
805	<i class="{{ settings.icon }}" aria-hidden="true"></i>
806	<# } #>
807	</{{{ htmlTag }}}>
808	</div>
809	<# } #>
810
811	<# if ( hasContent ) { #>
812	<div class="elementor-icon-box-content">
813
814	<# if ( settings.title_text ) { #>
815	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
816	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
817	{{{ settings.title_text }}}
818	</{{{ htmlTag }}}>
819	</{{{ titleSizeTag }}}>
820	<# } #>
821
822	<# if ( settings.description_text ) { #>
823	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
824	<# } #>
825
826	</div>
827	<# } #>
828
829	</div>
830	<?php
831	}
832
833	public function on_import( $element ) {
834	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
835	}
836	}
837