Font Awesome tutorial

Iconos Font Awesome

Font Awesome es una excelente biblioteca de fuentes de íconos y un marco CSS.

La fuente de caracteres de Font Awesome proporciona íconos vectoriales escalables, que se pueden personalizar en tamaño, color, sombra y cualquier estilo que se pueda usar con CSS.

Para usar los íconos de Font Awesome, agregue la siguiente línea en la sección de HTML de la página:

1、recomendado CDN en el interior:

<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">

2、recomendado CDN en el extranjero

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fuente-awesome/4.7.0/css/fuente-awesome.min.css">

Nota: No se recomienda descargarlo para instalarlo, simplemente cite el archivo CDN en la cabecera del documento html.
Nota: Este tutorial utiliza 4.7.0 versión.

Puede usar el prefijo fa y el nombre del ícono para colocar el ícono Font Awesome.

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<i　class="fa　fa-car"></i>
<i　class="fa　fa-car"　estilo="fuente-tamaño:48px;"></i>
<i　class="fa　fa-car"　estilo="fuente-tamaño:60px;color:red;"></i>
　
</body>
</html>

Prueba y mira ‹/›

Font Awesome está diseñado para usarse con elementos en línea. Los elementos <i> y <span> se utilizan ampliamente para íconos.

Además, tenga en cuenta que si cambia el tamaño de fuente o el color del contenedor del ícono, el ícono también cambiará.

ícono grande

fa-lg (aumentar33％)，fa-2x,fa-3x, fa-4x, o fa-5x se utiliza para aumentar el tamaño del ícono en relación con su contenedor.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<i　class="fa　fa-car　fa-lg"></i>
<i　class="fa　fa-car　fa-2x"></i>
<i　class="fa　fa-car　fa-3x"></i>
<i　class="fa　fa-car　fa-4x"></i>
<i　class="fa　fa-car　fa-5x"></i>
　
</body>
</html>

Prueba y mira ‹/›

Consejo: Si tus iconos se cortan en la parte superior e inferior, aumenta la altura de la línea.

íconos de lista

fa-ul y fa-li La clase se utiliza para reemplazar el prefijo predeterminado en la lista sin ordenar.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<ul　class="fa-ul">
　　<li><i　class="fa-li　fa　fa-check-square"></i>Íconos de lista</li>
　　<li><i　class="fa-li　fa　fa-spinner　fa-spin"></i>Íconos de lista</li>
　　<li><i　class="fa-li　fa　fa-square"></i>Íconos de lista</li>
</ul>
　
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

límites y iconos tirados

fa-border，fa-pull-right o fa-pull-left La clase se utiliza para referencias tiradas o iconos de artículos.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<i　class="fa　fa-quote-left　fa-3x　fa-pull-left　fa-border"></i>
Tutoriales básicos　--　Aprende bien la base, ¡puedes ir más lejos！！！<br>
Tutoriales básicos　--　Aprende bien la base, ¡puedes ir más lejos！！！<br>
Tutoriales básicos　--　Aprende bien la base, ¡puedes ir más lejos！！！<br>
Tutoriales básicos　--　Aprende bien la base, ¡puedes ir más lejos！！！
　
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

iconos dinámicos

fa-La clase 'spin' puede hacer que los iconos rotar, fa-La clase 'pulse' puede hacer que los iconos 8 el paso se rotará en el ciclo.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<i　class="fa　fa-spinner　fa-spin"></i>
<i　class="fa　fa-circle-o-notch　fa-spin"></i>
<i　class="fa　fa-refresh　fa-spin"></i>
<i　class="fa　fa-cog fa-spin"></i>
<i　class="fa　fa-spinner　fa-pulse"></i>
　
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Atención: IE8 y IE9 No se admite CSS3 animación.

iconos girados y volteados

fa-rotate-* y fa-flip-* La clase se utiliza para girar y voltear los iconos.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<i　class="fa　fa-shield"></i>
<i　class="fa　fa-shield　fa-rotate-90"></i>
<i　class="fa　fa-shield　fa-rotate-180"></i>
<i　class="fa　fa-shield　fa-rotate-270"></i>
<i　class="fa　fa-shield　fa-flip-horizontal"></i>
<i　class="fa　fa-shield　fa-flip-vertical"></i>
　
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

iconos apilados

Para apilar varios iconos, utilice 'fa' en el padre, fa-stack La clase, fa-stack-1x La clase 'fa' se utiliza para iconos de tamaño normal, fa-stack-2x Se utiliza para iconos más grandes.

fa-La clase 'inverse' se puede usar para reemplazar el color del icono. También puede agregar clases de icono más grandes al padre para controlar el tamaño adicional.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<span　class="fa-stack　fa-lg">
　　<i　class="fa　fa-circle-thin　fa-stack-2x"></i>
　　<i　class="fa　fa-twitter　fa-stack-1x"></i>
</span>
fa-twitter　on　fa-circle-thin<br>
　
<span　class="fa-stack　fa-lg">
　　<i　class="fa　fa-circle　fa-stack-2x"></i>
　　<i　class="fa　fa-twitter　fa-stack-1x　fa-inverse"></i>
</span>
fa-twitter　(inverse)　on　fa-circle<br>
　
<span　class="fa-stack　fa-lg">
　　<i　class="fa　fa-camera　fa-stack-1x"></i>
　　<i　class="fa　fa-ban　fa-stack-2x　text-danger"　style="color:red;"></i>
</span>
fa-ban　on　fa-camera
　
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Icono de ancho fijo

fa-La clase 'fw' se utiliza para establecer un ancho de icono fijo. Es muy útil cuando los anchos de diferentes iconos se desvían del alineamiento. Es especialmente adecuado para las listas de navegación y grupos de listas de Bootstrap.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="ancho=device-ancho, inicial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/fuente-awesome/4.7.0/css/fuente-awesome.css">
</head>
<body>
　
<p>Con ancho fijo:</p>
<div class="lista-grupo">
　　<a href="#" class="lista-grupo-item"><i class="fa fa-casa fa-fw"></i>　Inicio</a>
　　<a href="#" class="lista-grupo-item"><i class="fa fa-libro fa-fw"></i>　Biblioteca</a>
　　<a href="#" class="lista-grupo-item"><i class="fa fa-pincel fa-fw"></i>　Aplicaciones</a>
　　<a href="#" class="lista-grupo-item"><i class="fa fa-cog fa-fw"></i>　Configuración</a>
</div>
<p>Sin ancho fijo:</p>
<div class="lista-grupo">
　　<a href="#" class="lista-grupo-item"><i class="fa fa-casa"></i>　Inicio</a>
　　<a href="#" class="lista-grupo-item"><i class="fa fa-libro"></i>　Biblioteca</a>
　　<a href="#" class="lista-grupo-item"><i class="fa fa-pincel"></i>　Aplicaciones</a>
　　<a href="#" class="lista-grupo-item"><i class="fa fa-cog"></i>　Configuración</a>
</div>
　
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Iconos de marca Font Awesome