Mi Blog

No te olvides seguirme en Facebook.

Tan solo tienes que hacer click en Me Gusta

 

 

x

⋆ Cómo usar iconos Font Awesome en tu Página Web

⋆ Cómo usar iconos Font Awesome en tu Página Web

(Tiempo estimado: 5 - 10 minutos)

Añadiendo Font Awesome a nuestros desarrollos Web o aplicaciones, podemos hacer diseños más llamativos sin apenas esfuerzo. Existen diferentes alternativas muy similares a Font Awesome, como por ejemplo Fontisto, Entypo, Material Design Icons, Iconmonstr, Material Design etc ... Tanto el concepto, como el funcionamiento de todos estos Frameworks, es casi idéntico en todos ellos. Por tanto, sabiendo utilizar Font Awesome, sabremos utilizar todos los demás.

Seguid leyendo y os enseñaré a poner llamativos iconos en vuestras páginas web...

 

 

¿QUÉ ES FONT AWESOME?

Font Awesome es un framework de iconos vectoriales y estilos css. Pero, te estarás preguntando… ¿y para qué sirve? Font Awesome se utiliza para sustituir imágenes de iconos comunes por gráficos vectoriales convertidos en fuentes. No es necesario el uso de Javascript para su funcionamiento y disponemos de una versión gratuita y otra de pago. La versión de pago incluye iconos que no están disponibles en la versión gratuita. Utiliza una librería de mas de 2000 iconos transformadas en fuentes.

Por ejemplo, en la parte superior de mi Web, en el menú principal utilizo este tipo de Framework para dar un estilo mas llamativo y moderno.

Font AwesomeIconos Font Awesome

 

 

Web: https://fontawesome.com/

 

 

Con Font Awesome creamos proyectos más atractivos

 

 

1.- ELEMENTOS NECESARIOS PARA ESTE TUTORIAL

  • Un PC con un editor de textos o un IDE
  • Conexión a Internet

 

 

2.- INSTALAR FONT AWESOME

Para activar/instalar Font Awesome, abriremos la siguiente URL https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself y descargaremos la versión de Font Awesome actual. Una vez descargado el paquete, lo descomprimiremos (generalmente) en el raíz de nuestro proyecto/desarrollo:

Font AwesomeDescargar Font Awesome

 

 

Font Awesome incluye los siguientes directorios:

Ficheros & Directorios Qué son Por donde empezar
/css Hojas de estilos para las Fuentes all.css
/js SVG con JavaScript all.js
/less Pre-procesador Less fontawesome.less
/scss Pre-procesador Sass fontawesome.scss
/sprites SVG Sprites solid.svg
/svgs SVG individuales para cada icono Iconos *.svg individuales
/webfonts Fuentes usadas con CSS Ver /css

 

 

No todos los iconos pueden ser utilizados en la versión gratuita. En la siguiente tabla se pueden ver cuales son las familias que podemos utilizar en la versión gratuita de Font Awesome:

Estilo de Iconos Fichero de Fuentes Fichero CSS Disponibilidad
Font Awesome Brands fa-brands-400.* brands.css Gratis
Font Awesome Solid fa-solid-900.* solid.css Gratis
Font Awesome Regular fa-regular-400.* regular.css De Pago
Font Awesome Light fa-light-300.* light.css De Pago

 

 

3.- INSERTAR ICONOS

Insertar los iconos de Font Awesome es muy sencillo. Primero, tras descargar Font Awesome y descomprimirlo en nuestro directorio de trabajo, debemos incluir una llamada al fichero all.css en el <head> de nuestra Web. Si descargamos Font Awesome y lo descomprimimos en el raíz de nuestra web, el código será el siguiente:

<head>
<!----Font Awesome ----->
<script src="/js/all.js"></script>
</head>

 

  

Ahora debemos ir a la galería de iconos en https://fontawesome.com/icons?d=gallery, pinchar en el icono que queremos utilizar y copiar el código html que sale en la parte superior para incluirlo en nuestra desarrollo. Por ejemplo, para incluir un icono de "usuario" tanto de tipo Regular como Solid, el código es el siguiente y es el más sencillo de todos:

Tipo Icono Código
Regular: <i class="far fa-user">
Solid: <i class="fas fa-user">

 

 

 

 

4.- CAMBIAR TAMAÑO DE LOS ICONOS

Al utilizar un formato vectorial, los iconos puedes ser cambiados de tamaño sin que se vean los horribles "dientes de sierra" en los bordes. Para cambiar el tamaño de los iconos podemos utilizar 3 formas diferentes. En la primera tabla se puede ver como se cambia el tamaño utilizando em, px y rem:

Tamaño Icono Código
2em <span style="font-size: 2em;"><i class="fas fa-user"></i></span>
48px <span style="font-size: 48px;"><i class="fas fa-user"></i></span>
4rem <span style="font-size: 4rem;"><i class="fas fa-user"></i></span>

 

 

La segunda forma es utilizar fa-xs, fa-sm y fa-lg propio de Font Awesome:

Tamaño Icono Código
xs <i class="fab fa-angellist fa-xs">
sm <i class="fab fa-angellist fa-sm">
lg <i class="fab fa-angellist fa-lg">

 

 

Otra forma de cambiar el tamaño es cambiarlo por "escala":

Tamaño Icono Código
1x <i class="fas fa-award fa-1x">
2x <i class="fas fa-award fa-2x">
3x <i class="fas fa-award fa-3x">
4x <i class="fas fa-award fa-4x">
5x <i class="fas fa-award fa-5x">
6x <i class="fas fa-award fa-6x">
7x <i class="fas fa-award fa-7x">
8x <i class="fas fa-award fa-8x">
9x <i class="fas fa-award fa-9x">
10x <i class="fas fa-award fa-10x">

 

 

5.- CAMBIAR COLOR DE LOS ICONOS

Para cambiar los colores de los iconos, es tan sencillo como meter el icono dentro de las etiquetas de <span> donde asignaremos el color del icono:

Color Icono Código
indigo <span style="color: indigo;"><i class="fas fa-basketball-ball"></i></span>
coral <span style="color: dodgerblue;"><i class="fas fa-basketball-ball"></i></span>
magenta <span style="color: magenta;"><i class="fas fa-basketball-ball"></i></span>

 

 

DEMO ONLINE

 

 

ENJOY!


Raúl Prieto Fernández

Sitio Web: raulprietofernandez.net

Si quieres ir rápido, ve solo. Si quieres llegar lejos, ve acompañado.

Escribir un comentario

Código de seguridad
Refescar