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, y se pueden personalizar en 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<head>de la página HTML, agregue la siguiente línea:
1. CDN recomendado para China:
2. CDN recomendado para el extranjero
3. Descargar directamente a local
Download
Nota:No se recomienda descargar e instalar; basta con referenciar el 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 los iconos.
También 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 un 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 listas desordenadas.
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 en citas o artículos.
Ejemplo
Resultado:
Tutorial para novatos -- No solo se aprende tecnología, ¡¡¡sino también sueños!!!
Tutorial para novatos -- No solo se aprende tecnología, ¡¡¡sino también sueños!!!
Tutorial para novatos -- No solo se aprende tecnología, ¡¡¡sino también sueños!!!
Pruébalo »
Iconos animados
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 principal; 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 alterar el color del icono. También puede agregar clases de iconos más grandes al elemento principal para controlar aún más 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 anchos de iconos se desvían de la alineación. Es especialmente adecuada para listas de navegación y grupos de listas de Bootstrap.
Ejemplo
Pruébalo »