Añadir iconos sociales en Divi

Es importante poder añadir más iconos sociales en Divi porque por defecto no se pueden mostrar más que Facebook, Twitter, Google + y RSS.

 
iconos redes sociales DIVI
 

 
Parece ser un pequeño aspecto que podríamos mejorar en nuestra queridísima plantilla Divi para WordPress, aunque por supuesto que tiene una rápida solución, gracias a las enormes posibilidades de personalización que ofrece este tema.



 
Divi - excelente tema WordPress
 

 
Vamos a modificar la plantilla que configura los iconos de redes sociales mostrados en el menú de cabecera del tema.
 

Estos son los códigos disponibles para iconos de redes sociales en Divi:



.et-social-facebook a.icon:before { content: '\e093'; }
.et-social-twitter a.icon:before { content: '\e094'; }
.et-social-google-plus a.icon:before { content: '\e096'; }
.et-social-pinterest a.icon:before { content: '\e095'; }
.et-social-linkedin a.icon:before { content: '\e09d'; }
.et-social-tumblr a.icon:before { content: '\e097'; }
.et-social-instagram a.icon:before { content: '\e09a'; }
.et-social-skype a.icon:before { content: '\e0a2'; }
.et-social-flikr a.icon:before { content: '\e0a6'; }
.et-social-myspace a.icon:before { content: '\e0a1'; }
.et-social-dribbble a.icon:before { content: '\e09b'; }
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-vimeo a.icon:before { content: '\e09c'; }
.et-social-rss a.icon:before { content: '\e09e'; }


 


 
Así que nos vamos al archivo includes/social_icons.php

 
 

lo abrimos, y veremos las lineas siguientes:

 

 
<ul class="et-social-icons">
 
<?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-facebook">
<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
 
<?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-twitter">
<a href="<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
 
<?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-google-plus">
<a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
 
<?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'on' ) ) : ?>
<?php
$et_rss_url = '' !== et_get_option( 'divi_rss_url' )
? et_get_option( 'divi_rss_url' )
: get_bloginfo( 'rss2_url' );
?>
 
<li class="et-social-icon et-social-rss">
<a href="<?php echo esc_url( $et_rss_url ); ?>" class="icon">
<span><?php esc_html_e( 'RSS', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
 
</ul>

 

Como podemos ver, no se muestran más que los iconos de Facebook, Twitter, Google plus y el RSS.
 


 

Y si queremos añadir el icono de Instagram, por ejemplo,
icono instagram
 
añadiremos el siguiente código referente al icono de Instagram:

 
<li class="et-social-icon et-social-instagram">
<a target="_blank" href="https://www.instagram.com/MI_PERFIL_EN_INSTAGRAM/" rel="noopener noreferrer">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>

 


 

Y ya podemos disfrutar de nuestro nuevo icono social en Divi

nuevos iconos sociales divi



 

Damos las gracias a Agent WP por su valioso post.