Utilizar el Toolkit Font Awesome

Utilizar el Toolkit Font Awesome es extremadamente fácil, pero la verdad yo al igual que ustedes aprendo de la web y la primera ves que lo vi me fue confuso, espero que su experiencia sea mejor.

Toolkit Font Awesome son fuentes en forma de iconos como el logo de Facebook, Twitter, Google Plus, HTML5, CSS3, GitHub, WordPress, etc.

Agregar Font Awesome desde su CDN

Vamos a utilizarlo desde su CDN es más practico y ayuda en la carga de tu web te lo aseguro.

Copiamos el siguiente link dentro de la etiqueta head en nuestro archivo ya sea HTML, PHP, etc.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  

Descargar Font Awesome

Si deseas descargarlo para poder probarlo en tu servidor local, lo puedes hacer en esta dirección web.

Página Oficial de Font Awesome

Una vez ingresado a su página principal presionas en el botón Download.

Iconos Font Awesome

Te recomiendo visitar el siguiente link Iconos Font Awesome para ver todos los iconos disponibles que puedes utilizar en tus proyectos web.

Busca el icono que vas a utilizar y para ver su código haz clic sobre el icono elegido.

Seleccionar Icono Font Awesome

En esta página se nos mostrara el código que debes de usar para generar el icono, como por ejemplo:

<i class="fa fa-black-tie" aria-hidden="true"></i>  

Código del Icono Font Awesome

Así de simple mi amigo(a), espero que te sea de utilidad para tus proyectos.

uso en una página

Aquí un pequeño código para comprenderlo mejor.

<!DOCTYPE html>  
<html lang="es">  
<head>  
<meta charset="UTF-8">  
<title>Uso de Font Awesome</title>  
<!-- link de font awesome-->  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  
<style>  
 /*Estilos básicos para el menú*/
 .menu{ list-style-type: none;}
 .menu li{ margin-bottom: 10px;}
 .menu li a{ text-decoration: none;}
 .menu li a:hover{ text-decoration: underline; }

 /*Estilos para colorear los iconos*/
 .fa-firefox{color: #d96a26;}
 .fa-internet-explorer{color: #3170b3;}
 .fa-chrome{color: #46a554;}
 .fa-safari{color: #3881ac;}
 .fa-opera{color: #f26261;}
</style>  
</head>  
<body>  
<h1>Uso de iconos Font Awesome</h1>  
<h2>Descarga tu navegador web favorito</h2>  
<ul class="menu">  
  <li><i class="fa fa-firefox fa-2x"></i> <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Firefox</a></li>
  <li><i class="fa fa-internet-explorer fa-2x"></i> <a href="https://www.microsoft.com/es-es/download/internet-explorer-11-for-windows-7-details.aspx" target="_blank">Internet Explorer</a></li>
  <li><i class="fa fa-chrome fa-2x"></i> <a href="https://www.google.com/chrome/browser/desktop/index.html" target="_blank">Google Crhome</a></li>
  <li><i class="fa fa-safari fa-2x"></i> <a href="http://www.apple.com/es/safari/" target="_blank">Safari</a></li>
  <li><i class="fa fa-opera fa-2x"></i> <a href="http://www.opera.com/es" target="_blank">Opera</a></li>
</ul>  
</body>  
</html>  

Ver resultado

See the Pen Utilizar el Toolkit Font Awesome by Luis Rene Mas Mas (@01luisrene) on CodePen.

Ejemplos del toolkit Font Awesome

Te recomiendo visitar la página de Ejemplos Font Awesome.

Video Tutorial Font Awesome

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Hola, soy desarrollador front-end & dasarrollador móvil (Android), me encanta las tecnologías web - móvil, también administro este blog.

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión