Recientemente, Twitter ha cambiado el clásico icono del pájaro azul por una X. Pese a ello, muchos lo siguen llamando Twitter pero cada vez en más sitios ya se ve con la X negra.
Algunos temas o constructores de WordPress todavía no se han actualizado y siguen mostrando el icono antiguo. Es el caso de Divi.
Mientras sacan la actualización, vamos a ver cómo cambiarlo.
1. Añade el enlace al CDN de Font Awesome a Divi
Reemplazaremos el icono de Twitter por un icono de la fuente de Font Awesome. Font Awesome es una fuente (tipografía) de iconos para la web, y contiene una gran selección de iconos gratis y de pago para usar. El primer paso es enlazar el CDN de Font Awesome en tu web, mediante las opciones del tema Divi.
Divi ya incluye Font Awesome. Sin embargo, esta integración es distitna y no funciona para añadir iconos con pseudo-clases como necesitamos para modificar los iconos en este caso, así que necesitaremos este nuevo enlace con este CDN para que funcione.
Para empezar, copia este código en el apartado de configuración Divi > Opciones de tema Divi > Integraciones. En concreto, en el <head> mediante el editor de código del campo «Agregar código al <head> de su blog», como se ve en la imagen.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
2. Añade el módulo Divi Social Follow y la red Twitter
Lo normal es que si estás siguiendo este tutorial, ya tiene el módulo Divi Social Follow añadido a tu diseño, con suerte en una plantilla con el Theme Builder de Divi como un encabezado o pie de página. Si no es así, añádelo ahora con la red social Twitter.
Si estás utilizando el encabezado antiguo, este tutorial no te sirve. En este caso, deberías realizar la conversión de tu antigua cabecera a la cabecera Theme Builder para aprovechar sus ventajas, tales como la capacidad de personalizar los iconos sociales en Divi.
3. Reemplazar el icono de Twitter Divi con X usando CSS
Afortunadamente, Font Awesome fue rápido, y ya han añadido el icono X a su fuente, por lo que está disponible para su uso de forma gratuita en la sección «Marcas» de iconos. El valor unicode es e61b, que es el valor que determina qué icono se utiliza. Este es el código que hay que añadir a la propiedad content del icono en el módulo Divi Social Follow. Para reemplazarlo, necesitamos encontrar el selector y actualizar la propiedad content y la propiedad font-family.
Si estás usando un tema hijo, puedes ubicar este código CSS en el fichero style.css de tu tema. En caso contrario, ubícalo en la configuración Divi > Opciones de Tema Divi > CSS personalizado.
/*reemplazar el icono de Twitter con el de X en el módulo Social Follow de Divi */
.et-social-twitter a.icon:before {
content: "\e61b";
font-family: "Font Awesome 6 Brands" !important;
}
4. Actualizar el color de fondo
Cuando añades una red en el módulo, Divi utiliza automáticamente el color de marca por defecto, como el azul de Twitter. Pero puedes modificar esto, que es lo que necesitas hacer ahora ya que X no utiliza el azul de Twitter como color de fondo del icono, sino el negro #000000.
5. Reemplazar el tooltip del icono usando JQuery
Una última cosa, también necesitamos actualizar el pequeño tooltip que aparece cuando pasas el cursor del ratón sobre el icono de la red social Twitter/X. Por defecto, dice «Seguir en Twitter», lo que ahora es incorrecto ya que ha cambiado de nombre, aunque en muchos sitios le siguen llamando igual.
Para actualizardo, necesitamos añadir este pequeño script con jQuery en el mismo lugar que el código que hemos añadido en el primer paso. Para ello, volvemos a entrar en Divi > Opciones de Tema Divi > Integraciones y en la sección «Agregar código al <head> de su blog» añadir lo siguiente.
<script>
jQuery(document).ready(
function(){ jQuery('.et-social-twitter a').prop('title', 'Follow on X'); }
);
</script>
El resultado final, será como este:
