23 May Font Awesome ¿Qué es y cómo se usa?
Font Awesom es un framework de iconos vectoriales y estilos css. Pero… ¿para qué sirve? Este framework es utilizado para sustituir imágenes de iconos comunes por gráficos vectoriales convertidos en fuentes. Para ello utiliza una librería de mas de 400 iconos transformadas en fuentes.
Aquí os mostramos algunos de ellos:
Además de que nos permite reducir significativamente el uso de imágenes para iconos (lo cual se traduce en mejorar la velocidad de nuestra web), nos brinda las siguientes características:
Más de 400 iconos
En la versión actual existen más de 400 iconos disponibles, pero esto va en aumento y es actualizado con nuevos iconos permanentemente.
No se necesita del uso de javascript
Compatible con la mayoría de dispositivos y navegadores ya que no requiere de Javascript ni otras librerías para su uso, solo el soporte de @font-face por parte de los navegadores.
Escalabilidad
Al tratarse de iconos vectoriales nos permite escalar nuestros iconos sin problemas de resolución.
Licencia libre
Font Awesome es totalmente libre para uso comercial
Control CSS
Fácil estilos gráficos de los iconos mediante estilos css: color, size, shadow, y otras propiedades, todo desde css.
PERFECCIÓN en Retina Displays
Al tratarse de vectores nos permite tener perfecta resolución en pantallas de alta resolución.
Compatibilidad con otros frameworks
Originariamente fue diseñado para ser usado con bootstrap, pero puede ser usado con cualquier otro framework y/o librería.
Uso en Desktop
Se puede instalar en nuestro escritorio, instalando FontAwesome.otf, y estableciéndolo como fuente de la aplicación. Esto nos permite usar estos iconos de manera directa en bocetos en programas de nuestro ordenador.
Puedes visualizar el listado de iconos y su código unicode desde aquí.
¿Como se usa?
1- Incluye el siguiente código en el <head> de tu página:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">2 – Ten a mano la lista de iconos que puedes utilizar.
3 – Incorpora los iconos a tu diseños mediante el uso de clases en etiquetas
4 – Dale el estilo de diseño que quieras mediante estilos css.
Ejemplo: Cambiar el color
¡Y listo!
Solo queda que nos cuentes tu experiencia y resultado usando este práctico framework.
Sin comentarios