3

La forma más efectiva de agregar íconos a tus páginas 😉

¡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:

  1. Webfonts: Tal como te comenté, son básicamente convertir estos íconos en una fuente tipográfica.
  2. 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

FontAwesome

Escribe tu comentario
+ 2
0
21936Puntos

¿Es más eficiente cargar ese script y cargar externamente cada icono en vez de tener cada icono en una carpeta en formago svg o en un servidor? ¿Cuál sería la ventaja?

0
163100Puntos
un año

FontAwesome lo hace de esa forma, ya que así pueden controlar los paquetes de íconos que lanzan (ellos tienen paquetes de paga, así que les conviene controlarlos)

Al usar la tecnología SVG de FontAwesome estás cargando el script que se encarga de construir esos íconos (la tecnología SVG construye los íconos usando JavaScript, es decir, los va trazando línea por línea), en cambio, si usas la tecnología WebFonts, esos sí son íconos pre-construidos (fuentes) que cargas externamente.

En ambos casos estás cargando íconos de manera externa, así que obviamente eso implica que no sea tan eficiente como tenerlos en una carpeta, pero FontAwesome solo permite hacerlo de esta manera, aunque otras páginas como Icomoon sí que permiten descargarte los íconos como WebFonts y tú los puedes guardar en la carpeta de tu proyecto e importarlos 😄

0
21936Puntos
un año

Ya vi otro problema, te limita una cantidad de “10k views por mes”, así que para proyectos pequeños, demos y portafolio creo que está ok, pero para cosas más serias, pues si no pasas por caja no te va a servir.

0
21936Puntos
un año

Y estaba por usarla hoy para una web de práctica que estoy haciendo, pero, al ver tan lenta la web y complicado agregar cada cosa, más fácil me he descargado los pocos iconos que necesito en formato SVG de aquí, y pues fue mucho más cómodo y fácil de usar.