¡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.
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 😄¡
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:
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. 💚
¿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?
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 😄
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.
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.