Cómo agregar iconos impresionantes de fuente en HTML y CSS?
Los iconos increíbles que se basan en CSS y menos son una de las opciones entre la gama enorme de iconos que se pueden integrar en su sitio web. Exploremos cómo agregarlos en su página web.
Cómo agregar iconos impresionantes de fuentes?
Hay dos formas de agregar una edición gratuita de Font Awesome Icons en su página web HTML que son:
Cargar la biblioteca
El primer enfoque de agregar un icono impresionante de fuentes en su sitio web es agregar la biblioteca de Font Awesome en la sección de su archivo HTML. Por ejemplo, en la siguiente sintaxis, la biblioteca de Font Awesome de la versión 4.7.0 se agrega en la sección.
Bibliotecas de otras versiones impresionantes de fuentes están disponibles en línea.
Obtener código del kit
El segundo enfoque para agregar un icono impresionante de fuente en su página web es hacer una cuenta en el sitio web oficial de Font Awesome para recibir un código con el nombre "Código del kit". Este código se puede usar al insertar una fuente impresionante en su página web. Una vez que obtenga el código del kit, agregue el enlace en el atributo SRC de la etiqueta ..
Al recibir el código del kit, inserte en lugar de "kitcode" en el enlace y ponte en marcha. Por ejemplo.
Ejemplo
Supongamos que desea insertar un icono de cámara utilizando el enfoque del código del kit. Para hacerlo, considere el siguiente fragmento de código:
Nota: Se agregan iconos impresionantes de fuentes en o elementos.
El prefijo FA se usa para agregar iconos impresionantes de fuentes junto con el nombre del icono. Las versiones más nuevas de Font Awesome también usan prefijos como Fas (para modo sólido) y FAR (para modo regular).
Producción
El icono de cámara de fuente Font Insertado correctamente.
La siguiente demostración muestra la diferencia entre los prefijos FAS y FAR.
Producción
El icono de campana de Font Awesome (modo sólido y modo normal) incrustado con éxito.
Ahora que sabemos cómo insertar un icono impresionante de fuentes en la página web, veamos cómo cambiar el tamaño de los iconos impresionantes.
RESIMENTO FUNT ICONES IMPRESIONANTES
Hay un total de 13 clases que se utilizan para alterar el tamaño de los iconos impresionantes de fuentes y estas clases son; FA-XS, FA-SM, FA-LG, FA-2X, FA-3X, FA-4X, FA-5X, FA-6X, FA-7X, FA-8X, FA-9X y FA-10X.
Ejemplo
Este ejemplo demuestra algunas de las clases mencionadas anteriormente.
Producción
El icono Font Awesome Bell con varios tamaños se inserta en la página web.
Más sobre Font Icons Awesome!
Aquí hemos enumerado algunas cosas que se pueden hacer para fomentar iconos increíbles para mejorar la experiencia del usuario.
Iconos impresionantes de la fuente animada
Puedes animar iconos impresionantes de fuentes usando las clases a continuación.
fa-spin: Se usa para rotar un icono.
fa-pulso: También se usa para rotar un icono pero con 8 pasos.
Ejemplo
Este ejemplo demuestra las clases mencionadas anteriormente.
Producción
Los iconos Sync-Alt y Spinner se animan usando clases FA-Spin y FA-Pulse.
Font impresionantes iconos listados
Puede reemplazar las balas ordinarias usando las clases FA-UL y FA-LI.
Ejemplo
Las clases mencionadas anteriormente se demuestran aquí.
- Artículo 1
- Artículo 2
- Artículo 3
Producción
Los íconos de la lista de fuentes están integrados en la página web HTML.
Girar y voltear iconos impresionantes
Puedes rotar y voltear iconos increíbles utilizando clases FA-Rotate-* y FA-FLIP-*.
Ejemplo
El ejemplo a continuación muestra cómo rotar y iconos impresionantes.
Producción
El icono impresionante de la fuente del automóvil se está girando y se voltea desde diferentes ángulos.
Apilamiento de la fuente íconos impresionantes
Puedes apilar iconos increíbles usando las siguientes clases.
FA-Stack: se utiliza para el icono considerado como padre en la pila.
FA-stack-1x: se usa para icono con el tamaño regular en la pila.
FA-stack-2x: se usa para icono con el tamaño más grande en la pila
FA-Inverse: se usa para cambiar el color de un icono en la pila.
Ejemplo
Este ejemplo es una demostración de iconos impresionantes de fuentes apilados.
Producción
El icono de prohibición de fuentes se apiló con éxito en Font Awesome Car Icon.
Fuente fronteriza y tirada iconos impresionantes
Puede agregar bordes y tirar de iconos impresionantes de fuentes usando clases; clases de FA-Border, Fa-Pull-Right y Fa-Pull-Left.
Ejemplo
Aquí se ilustran las clases de iconos fronterizos e íconos.
Los iconos son una forma de demostrar una acción o un objeto visualmente. Estos se consideran muy importantes en un diseño web para captar la atención del usuario. Además de esto, los íconos mejoran la apariencia de un sitio web, proporcionan una navegación fácil y aumentan la experiencia del usuario. Los iconos increíbles que se basan en CSS y menos son una de las opciones entre la gama enorme de iconos que se pueden integrar en su sitio web.
Producción
Una cita fue tirada con éxito a la izquierda con un borde.
Conclusión
Los iconos increíbles de fuentes se pueden integrar en su sitio web recibiendo un código de kit del sitio web oficial de Font Awesome. Hay varias clases disponibles para cambiar el tamaño de los íconos impresionantes de fuentes, además, puede hacer múltiples cosas con estos íconos, como los iconos impresionantes de la fuente animada, usarlos en lugar de las balas ordinarias en una lista, rotar y voltear estos íconos, etc. Esto y mucho más sobre los iconos impresionantes de fuentes se discuten en este artículo con la ayuda de ejemplos adecuados.