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
CSSnecesario 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>
Entonces el CSS necesario es el siguiente:
.search-icon {
width: 100px;
height: 100px;
}
.search-icon img {
content: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJzZWFyY2gtcGx1cyIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLXNlYXJjaC1wbHVzIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMzA0IDE5MnYzMmMwIDYuNi01LjQgMTItMTIgMTJoLTU2djU2YzAgNi42LTUuNCAxMi0xMiAxMmgtMzJjLTYuNiAwLTEyLTUuNC0xMi0xMnYtNTZoLTU2Yy02LjYgMC0xMi01LjQtMTItMTJ2LTMyYzAtNi42IDUuNC0xMiAxMi0xMmg1NnYtNTZjMC02LjYgNS40LTEyIDEyLTEyaDMyYzYuNiAwIDEyIDUuNCAxMiAxMnY1Nmg1NmM2LjYgMCAxMiA1LjQgMTIgMTJ6bTIwMSAyODQuN0w0NzYuNyA1MDVjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwTDM0MyA0MDUuM2MtNC41LTQuNS03LTEwLjYtNy0xN1YzNzJjLTM1LjMgMjcuNi03OS43IDQ0LTEyOCA0NEM5My4xIDQxNiAwIDMyMi45IDAgMjA4UzkzLjEgMCAyMDggMHMyMDggOTMuMSAyMDggMjA4YzAgNDguMy0xNi40IDkyLjctNDQgMTI4aDE2LjNjNi40IDAgMTIuNSAyLjUgMTcgN2w5OS43IDk5LjdjOS4zIDkuNCA5LjMgMjQuNiAwIDM0ek0zNDQgMjA4YzAtNzUuMi02MC44LTEzNi0xMzYtMTM2UzcyIDEzMi44IDcyIDIwOHM2MC44IDEzNiAxMzYgMTM2IDEzNi02MC44IDEzNi0xMzZ6Ij48L3BhdGg+PC9zdmc+);
}
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!
Deja una respuesta