Iconos Font Awesome
Font Awesome es una popular biblioteca de fuentes de iconos, utilizada para el diseño y desarrollo web.
Font Awesome contiene una serie de iconos vectoriales que se pueden invocar y usar fácilmente mediante CSS. Se pueden personalizar su tamaño, color, sombra, etc.
Font Awesome fue originalmente un proyecto de código abierto creado por Dave Gandy, con el objetivo de proporcionar un conjunto de iconos flexible, fácil de usar y escalable, para reemplazar los iconos de imagen tradicionales.
Font Awesome ha actualizado muchas versiones; actualmente las principales sonFont Awesome 6 、Font Awesome 5yFont Awesome 4; todas las versiones se pueden consultar en:https://fontawesome.com/versions。
Este sitio utiliza para las pruebasFont Awesome 4, lista de iconos:https://fontawesome.com/v4/icons/。
Para usar los iconos de Font Awesome, en la sección de la página HTML<head>agregue las siguientes líneas:
1. CDN recomendado en China:
2. CDN recomendado en el extranjero
3. Descargar directamente a local
Download
Nota:No se recomienda descargar e instalar; simplemente haga referencia al archivo CDN en el encabezado del documento HTML.
Nota:Este tutorial utiliza la versión 4.7.0.
Puede usar el prefijofay el nombre del icono para colocar los iconos de Font Awesome.
Ejemplo
Resultado:
Pruébalo »
Haga clic en el botón "Pruébalo" para ver el ejemplo en línea.
Font Awesome está diseñado para usarse con elementos en línea. Los elementos <i> y <span> se usan ampliamente para iconos.
Además, tenga en cuenta que si cambia el tamaño de fuente o el color del contenedor del icono, el icono cambiará.
Iconos grandes
Las clases fa-lg (aumenta 33%), fa-2x, fa-3x, fa-4x o fa-5x se utilizan para aumentar el tamaño del icono en relación con su contenedor.
Ejemplo
Resultado:
Pruébalo »
Consejo: Si sus iconos se cortan en la parte superior e inferior, aumente la altura de línea.
Iconos de lista
Las clases fa-ul y fa-li se utilizan para reemplazar los prefijos predeterminados en las listas no ordenadas.
Ejemplo
Resultado:
- List icons
- List icons
- List icons
Pruébalo »
Iconos con borde y flotantes
Las clases fa-border, fa-pull-right o fa-pull-left se utilizan para iconos flotantes o citas.
Ejemplo
Resultado:
Tutorial de novatos -- No solo se aprende tecnología, ¡sino también sueños!!!
Tutorial de novatos -- No solo se aprende tecnología, ¡sino también sueños!!!
Tutorial de novatos -- No solo se aprende tecnología, ¡sino también sueños!!!
Pruébalo »
Iconos dinámicos
La clase fa-spin permite que el icono gire; la clase fa-pulse permite que el icono gire en un ciclo de 8 pasos.
Ejemplo
Resultado:
Pruébalo »
Nota:IE8 e IE9 no admiten animaciones CSS3.
Iconos rotados y volteados
Las clases fa-rotate-* y fa-flip-* se utilizan para rotar y voltear iconos.
Ejemplo
Resultado:
Pruébalo »
Iconos apilados
Para apilar varios iconos, use la clase fa-stack en el elemento padre; la clase fa-stack-1x se usa para iconos de tamaño normal, y fa-stack-2x para iconos más grandes.
La clase fa-inverse se puede usar para alternar el color del icono. También puede agregar clases de iconos más grandes al elemento padre para controlar mejor el tamaño.
Ejemplo
Resultado:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Pruébalo »
Iconos de ancho fijo
La clase fa-fw se usa para establecer iconos de ancho fijo. Esta clase es muy útil cuando diferentes iconos tienen anchos que se desvían de la alineación. Es especialmente adecuada para listas de navegación y grupos de listas de Bootstrap.
Ejemplo
Pruébalo »