Nuestras promociones de aniversario se acaban en:  

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Seleccionar página

Agregar íconos personalizados a Divi sin plugins

En este tutorial te enseñaremos a agregar íconos personalizados dentro de Divi, sin ningún tipo de plugin. Es un tutorial muy demandado...

Por Jefferson M.

Feb 9, 2021

Accede a más de 500 recursos siendo PREMIUM

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

En este tutorial te enseñaremos a agregar íconos personalizados dentro de Divi, sin ningún tipo de plugin. Es un tutorial muy demandado por nuestros suscriptores, así que como siempre, nos dimos a la tarea de resolverlo y crearlo para ustedes.

Tiempo de lectura estimado: 6 minutos

El tema Divi viene preparado con una selección de íconos que se pueden usar con módulos como el módulo de blurn o de botones. Estos íconos son «íconos de fuentes» proporcionados por Elegant Themes y no hay una forma incorporada de agregar nuevas fuentes. Afortunadamente, hay una manera de solucionar esto para agregar nuestros propios íconos personalizados.

Agregar íconos personalizados a Divi usando código PHP

A continuación, se explica cómo agregar íconos personalizados manualmente a través del código PHP.

Primero, cómo te mostramos en el video, debes instalar algunos plugins necesitamos para integrar los íconos en el formato que queremos dentro de Divi y también, para agregar código personalizado sin necesidad de tener un ChildTheme.

Aprende a agregar + de2400 íconos personalizados en Divi con un plugin premium, aquí.

Una vez tengas los plugins instalados y activados, debes agregar el siguiente código PHP a tu sitio (por ejemplo, en el archivo functions.php de tu child theme en caso de que lo tengas) pero en nuestro caso lo haremos directo en code snippet.

Debes asegurarte de realizar una copia de seguridad de tu sitio web antes de usar este código, la seguridad en WordPress siempre es primero. El código es bastante largo (agregar íconos personalizados es un asunto complicado), pero básicamente puedes ignorarlo todo. Lo único que realmente importa es la última línea, que explico a continuación.

Aprende a agregar más íconos personalizados en el header y footer de Divi con un plugin premium aquí.

Copia y pega este Snippet PHP como indicamos en el video

if (!class_exists('DBDBCustomIcon')) {
	
	class DBDBCustomIcon {
		
		protected $id;
		protected $url;		
		
		public function __construct($id, $url='') {
			$this->id = $id;
			$this->url = $url;
		}
		
		public static function setup() {
			add_action('wp_head', array(__CLASS__, 'outputUserCss'));
			add_action('wp_head', array(__CLASS__, 'outputSharedUserJs'));
			add_action('wp_footer', array(__CLASS__, 'outputVisualBuilderJs'));
		}
		
		public static function outputUserCss() {
			echo '<style>'.self::getUserCss().'</style>';
		}
		
		public static function outputSharedUserJs() {
			echo '<script>'.self::getSharedUserJs().'</script>';
		}
		
		public static function outputVisualBuilderJs() {
			if (function_exists('et_fb_enabled') && et_fb_enabled()) {
				echo '<script>jQuery(function($){'.self::getMutationObserverJs().'});</script>';
			}
		}
		
		public function init() {
			$fontSymbolsPriority = apply_filters('DBDBCustomIcon_font_icon_symbols_priority', 50);
			add_filter('et_pb_font_icon_symbols', array($this, 'addToFontSymbols'), $fontSymbolsPriority);
			add_action('admin_head', array($this, 'outputIconPickerCss'));
			add_action('wp_head', array($this, 'outputIconPickerCssFb'));
			add_action('wp_footer', array($this, 'outputIconUpdateJs'));
			add_action('wp_head', array($this, 'db014_user_css_for_custom_button_icon'));
			add_action('wp_head', array($this, 'db014_user_css_for_custom_button_icons'));
			add_action('wp_head', array($this, 'db014_user_css_for_inline_icons'));
			add_action('wp_head', array($this, 'db014_user_css_for_custom_hover_icon'));
			add_action('wp_head', array($this, 'db014_user_css_to_hide_unwanted_icons'));
		}
		
		function db014_user_css_for_custom_button_icons() { ?>
			<style>
			.et_pb_custom_button_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before, 
			.et_pb_custom_button_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:after {
				background-size: auto 1em;
				background-repeat: no-repeat;
				min-width: 20em;
				height: 100%;
				content: "" !important;
				background-position: left center;
				position: absolute;
				top: 0;
			}
			.et_pb_custom_button_icon[data-icon="<?php esc_attr_e($this->id); ?>"] { 
				overflow: hidden;
			}
			</style>
			<?php
		}

		function db014_user_css_for_inline_icons() { ?>
			<style>
			.et_pb_posts .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
			.et_pb_portfolio_item .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before {
				content: '' !important;
				-webkit-transition: all 0.4s;
				-moz-transition: all 0.4s;
				transition: all 0.4s;
			}
			.et_pb_posts .entry-featured-image-url:hover .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img,
			.et_pb_portfolio_item .et_portfolio_image:hover .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img { 
				margin-top:0px; transition: all 0.4s;
			}
			.et_pb_posts .entry-featured-image-url .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img, 
			.et_pb_portfolio_item .et_portfolio_image .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"] img { 
				margin-top: 14px; 
			}
			.et_pb_dmb_breadcrumbs a:first-child .db014_custom_hover_icon {
				position: relative !important;
				left: 0%; 
				transform: none;
				vertical-align: middle;
				margin-right: 8px;
			}
			.et_pb_dmb_breadcrumbs li .db014_custom_hover_icon {
				position: relative !important;
				left: 0%; 
				transform: none;
				vertical-align: middle;
				margin-right: 8px;
				margin-left: 4px;
			}
			</style>
			<?php
		}

		function db014_user_css_for_custom_hover_icon() { ?>
			<style>
			.db014_custom_hover_icon { 
				width:auto !important; 
				max-width:32px !important; 
				min-width:0 !important;
				height:auto !important; 
				max-height:32px !important; 
				min-height:0 !important;
				position:absolute;
				top:50%;
				left:50%;
				-webkit-transform: translate(-50%,-50%); 
				-moz-transform: translate(-50%,-50%); 
				-ms-transform: translate(-50%,-50%); 
				transform: translate(-50%,-50%); 
			}
			</style>
			<?php	
		}

		function db014_user_css_to_hide_unwanted_icons() { ?>
			<style>
			.et_pb_gallery .et_pb_gallery_image .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
			.et_pb_blog_grid .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
			.et_pb_image .et_pb_image_wrap .et_pb_inline_icon[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
			.et_pb_dmb_breadcrumbs > ol > li > a:first-child[data-icon="<?php esc_attr_e($this->id); ?>"]:before,
			.et_pb_dmb_breadcrumbs > ol > li[data-icon="<?php esc_attr_e($this->id); ?>"]:before
			{ 
				display:none !important; 
			}
			</style>
			<?php
		}
		
		function db014_user_css_for_custom_button_icon() { 
			$id = $this->id;
			$url = $this->url;
			$icon = '.et_pb_custom_button_icon[data-icon="'.esc_html($id).'"]';
			$bg_img = empty($url)?'none':"url('".esc_html($url)."')";
			echo <<<END
			<style>
			$icon:before, 
			$icon:after {
				background-image: $bg_img;		
			}
			</style>
END;

			$is_svg = preg_match('#\.svg(\?[^.]*)?$#', $url);
			if ($is_svg) {
				// IE SVG background-size (as "auto" not supported) 
				// - width = half the 2em padding allocated for icon, and 50% height of button
				echo <<<END
				<style>
				body.ie $icon:before, 
				body.ie $icon:after {
					background-size: 1em 50%; 	
				}
				</style>
END;
			}
		}
		
		public function addToFontSymbols($fontSymbols) {
			$fontSymbols[] = $this->id;
			return $fontSymbols;
		}
		
		public function outputIconUpdateJs() { ?>
			<script>
			jQuery(function($){
				<?php if (!function_exists('et_fb_enabled') || !et_fb_enabled()) { ?>
				db014_update_icon(<?php echo json_encode($this->id); ?>, <?php echo json_encode($this->url); ?>);
				<?php } ?>
				$(document).on('db_vb_custom_icons_updated', function () {
					db014_update_icon(<?php echo json_encode($this->id); ?>, <?php echo json_encode($this->url); ?>);
				});
			});
			</script>
			<?php
		}		
		
		public function outputIconPickerCssFb() {
			if (function_exists('et_fb_enabled') && et_fb_enabled()) {
				$this->outputIconPickerCss();
			}
		}
		
		public function outputIconPickerCss() {
			echo '<style>'.$this->getIconPickerCss().'</style>';
		}
		
		public function getIconPickerCss() {
			$url = esc_html($this->url);
			$id = esc_attr($this->id);
			return <<<END
			.et-fb-option--select-icon li[data-icon="{$id}"]:after,
			.et-pb-option--select_icon li[data-icon="{$id}"]:before,
			.et-pb-option ul.et_font_icon li[data-icon="{$id}"]::before { 
				background: url('{$url}') no-repeat center center; 
				background-size: cover; 
				content: 'a' !important; 
				width: 16px !important; 
				height: 16px !important; 
				color: rgba(0,0,0,0) !important; 
			}
END;
		}		
		
		protected static function getSharedUserJs() {
			return <<<'END'
			function db014_update_icon(icon_id, icon_url) {
				db014_update_icons(jQuery(document), icon_id, icon_url);
				var $app_frame = jQuery("#et-fb-app-frame");
				if ($app_frame) {
					db014_update_icons($app_frame.contents(), icon_id, icon_url);
				}
			}
			
			function db014_update_icons(doc, icon_id, icon_url) { 
				db014_update_custom_icons(doc, icon_id, icon_url);
				db014_update_custom_inline_icons(doc, icon_id, icon_url);
			}
	
			function db014_update_custom_icons(doc, icon_id, icon_url) {
				var $custom_icons = doc.find('.et-pb-icon:contains("'+icon_id+'")');	
				var icon_visible = (icon_url !== '');
				var $icons = $custom_icons.filter(function(){ return jQuery(this).text() == icon_id; }); 
				$icons.addClass('db-custom-icon');
				$icons.html('<img class="dbdb-custom-icon-img" src="'+icon_url+'"/>');
				$icons.toggle(icon_visible); 
			}
			
			function db014_update_custom_inline_icons(doc, icon_id, icon_url) {
				var $custom_inline_icons = doc.find('.et_pb_inline_icon[data-icon="'+icon_id+'"]');
				var icon_visible = (icon_url !== '');
				var $icons_inline = $custom_inline_icons.filter(function(){ return jQuery(this).attr('data-icon') == icon_id; });
				$icons_inline.addClass('db-custom-icon');
				$icons_inline.each(function(){
					if (jQuery(this).children('.db014_custom_hover_icon').length === 0) {
						if (jQuery(this).closest('.et_pb_dmb_breadcrumbs').length === 0) {
							jQuery(this).html('<img class="db014_custom_hover_icon"/>');
						} else {
							jQuery(this).prepend(jQuery('<img class="db014_custom_hover_icon"/>'));
						}
					}
					jQuery(this).children('.db014_custom_hover_icon').attr('src', icon_url);
				});
				$icons_inline.toggle(icon_visible);
			}
END;
		}
		
		protected static function getMutationObserverJs() { 
			return <<<'END'
			db014_watch_for_changes_that_might_update_icons();
			
			function db014_watch_for_changes_that_might_update_icons() {
				var target = document.getElementById('et-fb-app'); 
				var observer = new MutationObserver(function(mutations) {
					mutations.forEach(function(mutation) {
						if (mutation.type === 'characterData') {
							$(document).trigger('db_vb_custom_icons_updated');
						} else if (mutation.type === 'childList') {
							if (db014_may_contain_icons(mutation.target)) {
								$(document).trigger('db_vb_custom_icons_updated');
							}
						} else if (mutation.type === 'attributes') {
							$(document).trigger('db_vb_custom_icons_updated');
						}

					});
				});
				observer.observe(
					document.getElementById('et-fb-app'), 
					{ 
						attributes: true, 
						attributeFilter: ["class"],
						childList: true, 
						characterData: true,
						subtree: true
					}
				);
			}
			
			function db014_may_contain_icons(target) {
				if (target.className === undefined) { 
					return false; 
				}
				var classes = target.className;
				if (classes.search === undefined) { 
					return false; 
				}
				if (classes.search(/(et-pb-icon|et_pb_inline_icon|et-fb-root-ancestor|et_pb_root--vb|et-fb-post-content|et_pb_section|et_pb_row|et_pb_column)/i) !== -1) {
					return true;
				}
				return false;
			}
END;
		}
		
		protected static function getUserCss() { 
			return <<<'END'
			.db-custom-icon img { 
				height: 1em;
			}
END;
		}
	}
}

DBDBCustomIcon::setup();
(new DBDBCustomIcon('IDdemiicono', 'http://www.misitio.com/icono.svg'))->init();

Cambiar la última línea para agregar tu ícono personalizado en Divi

La última línea es la que realmente agrega un ícono. Para agregar tu propio ícono, dale una identificación única (puede ser el nombre que quieras) y cambia la URL de la imagen por la de tu ícono que ya has tenido previamente descargado y subido a tu WordPress.

Esto llama a la clase agregada por el resto del código y hace todo el trabajo de agregar el ícono en Divi. Si necesita más iconos, simplemente copia la última línea y pégala debajo con un ID / URL diferente.

Nota: No olvides que deberás editar el color de ícono antes de subirlo en WordPress, lo puedes hacer directamente desde la herramienta de personalización de flaticon.

¿Te gustaría cambiar el ícono del carrito en Divi? Aprende a como hacerlo rápido y fácil aquí.

Conclusiones

Como ves, no es difícil agregar nuevos íconos personalizados dentro de Divi sin plugins. Solo hay que tener las herramientas y los recursos correctos, y el resto, es el limite.

¿Deseas que hagamos un tutorial enseñándote a hacer el procedimiento de configuración SMTP con Gmail? Dinos por acá abajo en la caja de comentarios.

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos