Iconos impresionantes de fuente

La biblioteca de iconos Font Awesome proporciona 519 iconos vectoriales escalables gratuitos. Esta biblioteca es completamente gratuita para uso personal y comercial. Diseñados originalmente para Bootstrap, estos iconos se pueden personalizar fácilmente.

Cargando la biblioteca de fuentes

Para cargar la biblioteca Font Awesome, copie y pegue la siguiente línea en la sección <head> de la página web.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

Usando el icono

Font Awesome proporciona varios iconos. Elija uno de ellos y agregue el nombre de la clase de icono a cualquier elemento HTML dentro de la etiqueta <body>. En el siguiente ejemplo, hemos utilizado el icono de la moneda india.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el tamaño

Puede aumentar o disminuir el tamaño de un icono definiendo su tamaño usando CSS y usándolo junto con el nombre de la clase, como se muestra a continuación. En el ejemplo dado, hemos declarado el tamaño como 6 cm.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el color

Al igual que el tamaño, puede definir el color de los iconos utilizando CSS. El siguiente ejemplo muestra cómo cambiar el color del icono de la moneda india.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Lista de categorías

Font Awesome proporciona 519 iconos en las siguientes categorías:

Iconos de aplicaciones web
Iconos de mano
Iconos de transporte
Iconos de género
Iconos de tipo de archivo
Iconos de Spinner
Iconos de control de formulario
Iconos de pago
Iconos de gráficos
Iconos de moneda
Iconos del editor de texto
Iconos direccionales
Iconos del reproductor de video
Iconos de marca

Para usar cualquiera de estos íconos, debe reemplazar el nombre de la clase en los programas dados en este capítulo con el nombre de la clase del ícono deseado. En los próximos capítulos de esta unidad (Font Awesome), hemos explicado por categorías el uso y los resultados respectivos de varios iconos de Font Awesome.

↰ Previous page Next page ↱