¡Que bonitas se ven las páginas que usan íconos! ¿Cierto? Te dan un feeling espectacular, cuando ves un ícono sobre un botón automáticamente sabes qué hace dicho botón. Ese es el poder de los íconos, son elementos visuales que asociamos con objetos de la vida real y automáticamente, por un proceso interno de nuestro cerebro, sabemos qué significa 😄.
.
Usar íconos en nuestra página web es casi obligatorio hoy en día, y para hacer esto debemos buscar la mejor forma de hacerlo, y con esto me refiero a que tenemos que cuidar el performance de nuestra página, es por eso que no podemos usar imágenes para hacer esto.
¿Por qué no puedo usar imágenes? 😩
Imagina que tienes demasiados íconos en tu página, ¡sería demasiado pesado cargar una imagen por cada ícono!, tu navegador tendría que hacer varias peticiones de descarga, una por cada imagen, eso no es bueno porque, además de afectar el performace, estás consumiendo datos del usuario.
.
Afortunadamente hay alternativas más eficientes y sobre eso aprenderemos hoy. Quiero que pienses en algo, piensa en la cantidad de letras que muestra un navegador al visitar un sitio web, letras tenemos demasiadas, tu al leer este tutorial estás consumiendo una gran cantidad de letras, y recordemos que, a grandes rasgos, las letras son una representación visual, ¿no sería bueno hacer algo similar con los íconos? ¡Pues te tengo una excelente noticia 😄¡
Le mejor forma de usar íconos en tu sitio web
Los íconos también pueden ser considerados una fuente ¡sí, tal como si los escribiésemos desde el teclado!, esto nos da muchas ventajas, una de ellas es el hecho de que podemos manipularlos con CSS como si se tratase de un texto 😉.
.
Actualmente existen dos formas de manejar íconos:
- Webfonts: Tal como te comenté, son básicamente convertir estos íconos en una fuente tipográfica.
- SVG: Esta es una tecnología relativamente nueva para los íconos. Es un pedazo de código que se encargará de dibujar los íconos en tiempo real, sí, como si fuese canvas 😉.
La ventaja de ambas: ¡Puedes escalarlas SIN perder calidad! (Con imágenes si la perderías).
.
Bien, mucho bla, bla, bla y poco tap, tap, tap, ya que tienes nociones de esto ¡vamos al código!
Para ello he preparado un pequeño video en donde te estaré mostrando cómo añadir estos íconos a tu web 😉
¡Genial! Ahora ya sabes cómo añadir íconos a tu página web de forma eficiente y cuándo debes elegir SVG o WebFonts, ¿qué te parecen? ¿Tienes ganas de empezar a usar íconos en tu web? ¡Pues ya sabes cómo hacerlo!
.
Estaré pendiente de los comentarios por si tienes alguna duda, recuerda que puedes aprender más cosas como estas suscribiéndote a mi canal donde estaré subiendo cosas interesantes. 💚
Enlaces relacionados
Curso Definitivo de HTML y CSS
