Fuente impresionante: la guía de la biblioteca completa

Iconos libres de fuente impresionantes: qué es y para qué se usa. Cómo conectar los iconos al sitio. Ventajas y desventajas de la biblioteca.

Conjunto de iconos de fuente impresionante: la guía definitiva

La fuente impresionante es un conjunto de fuentes e iconos basados ​​en CSS y menos. La herramienta le permite conectar rápidamente todo tipo de iconos al sitio, mejorando significativamente su diseño y usabilidad. Es suficiente para insertar algunas líneas de código.

Font Awesome le ofrece iconos vectoriales escalables que puede personalizar fácilmente: tamaño, color, sombras y todo lo demás que se puede hacer con CSS.

Font Awesome Library tiene una gran colección de las mejores sugerencias para usted. Mejoras tu proyecto con íconos únicos. De hecho, este es un gran conjunto de todo tipo de iconos que puede usar para sus propios fines.

En Fontawesome, todos los iconos son absolutamente gratuitos. La biblioteca tiene licencia bajo la licencia pública general de GNU. Esto significa que se puede utilizar libremente en proyectos comerciales y, en principio, en todas partes.

El conjunto fue creado por Dave Gandhi. Incluye iconos de redes sociales gratuitos, iconos para mejorar la interfaz de usuario y más.

Típicamente, los scripts de fuente impresionantes de fuente se utilizan junto con Bootstrap y Bootstrapcdn. La fuente impresionante es el segundo solo para las fuentes de Google en popularidad.

Cómo funciona

La característica principal es que todos los iconos impresionantes de la fuente no son imágenes estáticas. Están en formato de fuente. En otras palabras, estas son fuentes de iconos. Por ejemplo, un icono de búsqueda o un logotipo de red social es el mismo que los caracteres simples A, B, C.

Las fuentes impresionantes iconos se crean utilizando vectores escalables. Por lo tanto, se pueden aumentar a casi cualquier tamaño.

Todos los iconos disponibles están incluidos en un archivo de fuente. Todo lo que necesita es descargar este archivo del sitio oficial y conectarlo en estilos.

¿Por qué los diseñadores eligen fuente impresionantes?

La fuente impresionante tiene una serie de ventajas:

• Conexión rápida. Solo necesita descargar un archivo especial del sitio web oficial y conectarlo especificando la ruta en el código CSS.
• Flexibilidad y escalabilidad. Los iconos se pueden ampliar a cualquier tamaño. Los símbolos serán tan claros como lo permita el dispositivo. En la era del diseño sensible, esto es importante. Por cierto, por la misma razón, los iconos increíbles de la fuente son adecuados para las pantallas de Retina.
• Estilización. Los iconos se pueden cambiar fácilmente en color, tamaño, sombra o cualquier otro parámetro externo. El diseñador obtiene todos los beneficios del estilo regular de estilo. También puedes girar los iconos. Por ejemplo, presione la vista al revés o gire 90 grados.
• Carga rápida del sitio. Todos los iconos están incluidos en un archivo de fuente. Por lo tanto, solo requiere una solicitud HTTP para cargar su fuente increíble. Esto es ideal para el rendimiento del sitio web.
• Amor de los navegadores. La fuente impresionante es una herramienta de navegador cruzada. No tiene que preocuparse por la compatibilidad del navegador de fuentes e iconos. Están bien apoyados por todos ellos. Incluso el viejo IE8.
• Compatible con diferentes marcos. La biblioteca fue creada principalmente para Bootstrap. Sin embargo, también funcionará bien con otros marcos.
• Varios formatos. La herramienta está disponible en formatos .eot, .ttf, .woff y svg. Así que la fuente asombrosa se maneja de la misma manera que otras fuentes web.
• No se requiere JavaScript. La fuente impresionante no requiere JavaScript para correr.

Por lo tanto, la fuente impresionante es una herramienta efectiva y conveniente que ahorra significativamente el tiempo de diseño y acelera su sitio web.

Desventajas de la fuente impresionante

La herramienta también tiene desventajas. Afortunadamente, no hay muchos de ellos.

Primero, los iconos solo se pueden pintar en un solo color. Sin embargo, esta limitación se puede evitar. Por ejemplo, combinando iconos libres entre sí. O usando efectos CSS

En segundo lugar, la biblioteca impresionante de la fuente contiene demasiados iconos y todos están incluidos en un archivo. Si un diseñador o diseñador de diseño solo necesita conectar un par de iconos, todavía tienen que cargar completamente la biblioteca completa. Y estos son cientos de miles de iconos adicionales que ocuparán espacio. Sin embargo, también hay una solución que también hay una solución, creando su propio ensamblaje, que solo incluirá los iconos necesarios.

Versiones impresionantes de fuente: 5 y 6.

Fuente Awesome 5 fue lanzada el 7 de diciembre de 2017 y originalmente contenía 1278 iconos. La quinta versión viene en dos paquetes: gratis (Fuente impresionante) y pagado (Font Awesome Pro). El plan gratuito también contiene iconos de todas las cuartas versiones. Los iconos están disponibles bajo la licencia de fuente SIL Abierta 1.1, Creative Commons Attribution 4.0 y MIT.

Fuente Awesome 6 es una nueva versión que se lanzó en la segunda mitad de 2020. Incluye nuevos iconos y solo está disponible en un plan de pago.

La fuente increíble 6 alfa también está en camino de 2021. Esta es otra nueva generación de biblioteca de iconos. Además de los nuevos iconos, la versión 6 Alpha también agrega nuevos estilos, nuevos servicios y herramientas de asistencia. Los usuarios pueden pre-ordenar.

Planes gratuitos y pagados: diferencias y características.

Puede descargar iconos de forma gratuita o pagada.

El plan gratuito incluye más de 1600 iconos y 1 conjunto. Un kit es una colección de iconos, estilos y configuraciones que le permite realizar cambios rápidamente sin agregar código.

Tarifa pagada:

• Incluye más de 7800 iconos y 20 sets.
• Proporciona acceso a Font Awesome Pro. Esto significa que los iconos se pueden usar en aplicaciones móviles nativas y en su computadora (por ejemplo, en un editor de texto de Word o al crear una presentación en PowerPoint).
• Te permite subir tus propios iconos. Puedes usar tus propios iconos junto a o en lugar de las impresionantes iconos de la fuente oficial. Por ejemplo, así es como puede cargar un logotipo de la empresa. Puede realizar las mismas acciones con sus propios iconos que con los básicos, cambie el estilo, el tamaño, el color, etc.

Ambas versiones son perpetuas. Es decir, se proporcionan de una vez por todas.

Formas de conectar la fuente impresionante

En primer lugar, debe ir al sitio web oficial y descargar la biblioteca. El archivo descargado debe ser desempaquetado y las carpetas de CSS y fuentes copiaron a la carpeta de su sitio.

Después de eso, la ruta al archivo de la biblioteca se especifica entre las etiquetas de la cabeza. Por ejemplo:

Cómo mostrar los iconos increíbles de fuente en un sitio web. Métodos más populares:

1.Usando HTML

La forma más fácil.

Debe ir a la galería en el sitio web oficial (Fontawesome.com/icons?d=Gallery) y elegir el icono que le guste. Cada icono tiene un código personal, por ejemplo:. Es suficiente para copiarlo y pegarlo en el lugar correcto en el código.

2. VIA CSS

Para hacer esto, use los pseudo-elementos después o antes, así como el Unicode del icono requerido. Puedes llevarlo todo en la misma galería. Un ejemplo de dicho código: F209.

Un ejemplo de una entrada de archivo de estilo:

div :: después de {pantalla: bloque; Contenido: 'F209'; Fuente-familia: 'fuente impresionante 5 gratis';}

En conclusión: todos los iconos impresionantes de la fuente

Por lo tanto, la fuente impresionante es una forma rápida y conveniente de agregar iconos gratuitos a su sitio web. Todos los iconos son fácilmente escalables y no ralentizan el sitio.