[Resuelto] Cambio de icono de you tube en DIVI

Hola Luis.

Ese es el nuevo icono oficial de Youtube para las opciones de Seguir o suscribe. YouTube actualizó su logo y sus íconos oficiales a nivel mundial durante 2025.

En tu web usas los botones oficiales de YouTube dentro de Divi y Divi los actualiza automáticamente cada vez que YouTube lanza un nuevo diseño. Por eso el cambio apareció solo, sin que nosotros hayamos hecho nada, y la web se mantiene 100 % al día con la imagen oficial de YouTube.

No es ningún error simplemente es que Google actualizo el icono de Youtube.

Un saludo

Gracias @Pepe por tu pronta respuesta,

IMPORTANTE

Es decir, que hasta DIVI no actualice esos iconos a los nuevos, ¿seguiremos visualizando el icono que actualmente estamos observando en la web, es decir, el icono que se mostraba con regularidad antes de las modificaciones realizadas por youtube?

Gracias @Pepe por tu amable respuesta.

Luis

Hola Luis.

¿seguiremos visualizando el icono que actualmente estamos observando en la web, es decir, el icono que se mostraba con regularidad antes de las modificaciones realizadas por youtube?

No, se actualizan automáticamente cuándo Google lo actualiza.

Si quieres que muestre el icono anterior:

.- Añade lo siguiente en Apariencia -< Personalizar -> CSS Adicional:

.et-social-youtube a.icon {
background-color: #FF0000 !important;
border-color: #FF0000 !important;
}

.et-social-youtube a.icon:before {
content: "\f167" !important; /* código exacto del icono clásico de YouTube */
font-family: "Font Awesome 5 Brands" !important;
font-weight: 400 !important;
color: #fff !important;
font-size: 20px !important;
}

.et-social-youtube a.icon:hover {
background-color: #cc0000 !important;
border-color: #cc0000 !important;
}

Un saludo

Gracias @Pepe, estaba confundido. Gracias por tu amable comprensión y ayúdame a resolver esto que me lo están reclamando en la empresa.

Déjame saber por favor si te entendí bien. El logo que nos está apareciendo en la web, es el nuevo logo oficial de youtube. NO tenemos que hacer nada, pues ese es el nuevo logo de youtube.

La duda se presenta porque buscando en Internet, encuentro que el nuevo logo de you tube, no es el que está apareciendo en nuestra web. El siguiente es el nuevo logo según mi investigación, pero no es el que está apareciendo en nuestra web.

Y el logo que aparece en nuestra web es distinto, he allí mi confusion, como lo puedes ver en el logo que aparece más abajo.

¿Ves que son diferentes?

NO quiero mostrar el antiguo logo de youtube, sino el que Google haya definido para youtube, pero en DIVI no está apareciendo.

Gracias por tu paciencia conmigo.

Luis

@Pepe,

Por favor podrías adjuntar aquí el nuevo logo de you tube para compararlos con el que aparece en nuestra web, por favor.

Saludos.

Luis

Hola @Pepe,

Había una línea en CSS Aditional, que en alguna ocasión se agregó para que apareciera el cintillo del encabezado el logo de youtube.

La línea es la siguiente *.et-social-youtube a.icon:before { content: "E0A3"; }

No sé, si ese es el logo que debe aparecer, pero al menos no se ve tan mal como el anterior.

Te adjunto una imagen de como se ve, y por favor déjame saber si ese es el nuevo logo de youtube que debe aparecer en DIVI

Gracias por tu paciencia y ayuda.

Luis 

Hola Luis.

Te adjunto una imagen de como se ve, y por favor déjame saber si ese es el nuevo logo de youtube que debe aparecer en DIVI

Exacto ese es.

Divi muestras el icono de Font Awesome que es el que te pase con el CSS anterior.

https://fontawesome.com/icons/youtube?f=brands&s=solid

El logo de la captura es el oficial de YouTube de 2013-2017, si quieres utilizarlo puedes sustituir el CSS anterior por el siguiente:

.et-social-youtube a.icon {
background-color: transparent !important; /* quitamos el fondo rojo */
background-image: url('https://tudominio.com/wp-content/uploads/2025/12/youtube-classic.png') !important;
background-repeat: no-repeat;
background-position: center center;
background-size: 70% auto !important; /* ajusta el tamaño del logo dentro del botón */
border: none !important;
position: relative;
}

/* Quitamos el icono anterior (el triángulo) */
.et-social-youtube a.icon:before {
content: "" !important;
}

/* Hover: oscurecemos un poco el logo para que se note */
.et-social-youtube a.icon:hover {
opacity: 0.8;
background-size: 75% auto !important;
}

Tienes que subir la imagen a la galería de imanes de WordPress y sustituir la URL por la de la imagen:

background-image: url(' ') !important;

Un Saludo

Gracias @Pepe y gracias por el código CSS,

Perdona, sigo con dudas. ¿por qué debo agregar código CSS para mostrar el nuevo logo de DIVI? si la configuración del módulo de Redes Sociales de DIVI, solo hay que seleccionar la Red Social y DIVI incluye el logo, y no es necesario agregar código CSS? Te muestro la configuración, aunque tu ya la debes conocer.

 La ultima imagen que me pasaste en el mensaje anterior a este no se visualiza. Podría reenviarmela por favor?

Gracias

Luis

Hola Luis, 

El codigo CSS que comparte Pepe debes añadirlo en el apartado de Divi → Opciones del tema → General → CSS personalizado, debes pegarlo en esa sección y guardas los cambios. 

Adicional a ello necesitas añadir la imagen del logo dentro de tu biblioteca de medios y sustituir la imagen o la URL de la imagen dentro del código, específicamente la URL 

background-image: url('https://tudominio.com/wp-content/uploads/2025/12/youtube-classic.png') !important;

Verifícalo y nos comentas como va todo

Un Saludo 

Hola Luis.

Perdona, sigo con dudas. ¿por qué debo agregar código CSS para mostrar el nuevo logo de DIVI?

No tines que añadir nada, como lo tienes esta bien, ese es el ultimo icono de Youtube

Un saludo

@Pepe un saludo, y muchas gracias por tu ayuda.

Que Dios te bendiga son mis mas sinceros deseos.

Un abrazo,

Luis

Hola Luis.

Nada, como siempre un placer poder orientaros en lo que nos sea posible.

Cualquier consulta que tengas no dudes en comunicarlo.

Un saludo y felices fiestas Amigo !!!!