Los iconos básicos
Para utilizar los iconos impresionantes fuente, añadir la siguiente línea dentro de la <head> sección de su página HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Nota: No se requiere ninguna descarga o instalación!
De colocar iconos impresionantes fuente utilizando el prefijo fa y el nombre del icono.
Ejemplo
El siguiente código:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>Resultados en:
Fuentes impresionante está diseñado para ser utilizado con los elementos en línea. El <i> y <span> elementos son ampliamente utilizados 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 cambia. Mismas cosas va para sombra, y cualquier otra cosa que consigue heredó el uso de CSS.
Los iconos más grandes
La fa-lg (33% increase) , fa-2x , fa-3x , fa-4x , o fa-5x clases se utilizan para aumentar el tamaño de los iconos en relación con su contenedor.
Ejemplo
El siguiente código:
<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>
Resultados en:
Tip: Si los iconos están siendo cortados en la parte superior e inferior, aumentar la línea de altura.
Iconos de la lista
Las fa-ul y fa-li clases se utilizan para sustituir las balas por defecto en listas desordenadas.
Ejemplo
El siguiente código:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Resultados en:
- List icons
- List icons
- List icons
Iconos bordeadas y tiró
Las fa-border , fa-pull-right o fa-pull-left clases se utilizan para la extracción de las cotizaciones o los iconos del artículo.
Ejemplo
El siguiente código:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Resultados en:
Iconos animados
El fa-spin clase tiene cualquier icono para girar, y el fa-pulse clase tiene cualquier icono para girar con 8 pasos.
Ejemplo
El siguiente código:
<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>
Resultados en:
Nota: IE8 e IE9 no soportan animaciones CSS3.
Girado y se volcó Iconos
Las fa-rotate-* y fa-flip-* clases se utilizan para rotar y voltear iconos.
Ejemplo
El siguiente código:
<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>Resultados en:
Iconos apiladas
Para apilar varios iconos, utilice la fa-stack clase sobre el padre, la fa-stack-1x clase para el icono de la regularidad de tamaño, y fa-stack-2x para el icono más grande.
La fa-inverse clase se puede utilizar como un color de icono alternativo. También puede agregar más grandes clases de iconos de los padres para controlar aún más el tamaño.
Ejemplo
El siguiente código:
<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-cameraResultados en:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Iconos de ancho fijo
La fa-fw clase se utiliza para establecer los iconos en un ancho fijo. Esta clase es útil cuando diferentes anchuras icono arrojan fuera de alineación. Especialmente útil en navlists de rutina de carga y grupos de listas.
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> Inténtalo tú mismo " Oreja
Impresionante fuente también funciona muy bien con todos los componentes de archivos de inicio.