Cambiar la fuente de una imagen usando contenido codificado con CSS

Cambiar la fuente de una imagen usando contenido codificado con CSS

En este corto tutorial, lo que vamos a hacer es cambiar la fuente de una imagen, es decir el src por otra que está codificada en base64 directamente desde la hoja de estilos sin tener que tocar el HTML.

Un corto antecedente

La verdad es que tal vez te preguntes ¿Por qué querría hacer esto?…

Pues bueno, en mi caso, tengo un gestor de contenido que agrega una imagen que no le gusta a nuestro cliente y no hay manera de hacer que esta cambie sin modificar el código fuente del sistema de contenido.

Lo cual no es una opción en este caso.

Adicionalmente, solo se puede agregar estilos. No se puede cargar imágenes a la plantilla.

Así que la alternativa es hacerlo todo desde la hoja de estilos.

Proceso para cambiar la fuente de una imagen.

La receta es muy sencilla

  • Conseguir la imagen reemplazo. En nuestro caso usaremos un SVG
  • Codificarla en base64
  • Agregar el CSS necesario para hacer el reemplazo de la imagen

Descarga el SVG si es que no lo tienes

Yo voy a utilizar uno de Font Awesome

La ventaja de usar un archivo SVG es que no vas a tener problemas de redimensionamiento, ya que siendo un formato de curvas, siempre va a escalar bien.

Conviértelo a Base 64

Hay muchas formas de hacerlo, pero la más sencilla es usando base64.io

Solamente debes hacer Drag’n Drop de la imagen sobre esta página y esta te arrojará el CSS necesario para un backround. Nosotros solo necestiamos la parte que está en la url (url(...);)

Agrega el CSS a tu hoja de estilos

Esta es la única parte con truco… que la verdad no es tanto

Tengo que el html es

<div class="search-icon"> <img src="" alt="🔎"> </div>

Resultado

El resultado es obvio, donde no había imagen, ahora está el ícono de búsqueda.

El proceso completo

El proceso completo sería el siguiente

Si necesitas ayuda con algún tipo de proceso para el diseño de tu página web contáctanos.

¡Podemos ayudarte!

Actualizado: miércoles, 10 de mayo de 2023

Mario Yepes