Como usar iconos de fontawesome (o parecidos) en una página web

Como usar iconos de fontawesome (o parecidos) en una página web

3.4
(8)

En todo proyecto web tarde o temprano se terminan usando iconos.

Los iconos pueden representar la típicas facebook, instagram, youtube… así como las típicas imágenes que terminamos viendo en todas partes

En esta publicación vemos como los podemos implementar en nuestra página web.

¿Qué es fontawesome?

Fontawesome es un repositorio de iconos algunos de pago y otros gratuitos.

Imágenes actualizadas y de calidad de marcas conocidas, emoticonos,…

Fontawesome y otros repositorios de iconos nos ayudan a ganar tiempo en la implementación de nuestro proyecto web.

Por norma general consisten en una tipografía formada únicamente por iconos. Cada icono viene identificado por una secuencia de caracteres.

galería iconos fontawesome
Ejemplo galería iconos fontawesome

También hay otras empresas y alternativas que ofrecen paquetes de iconos. Gratuitas o de pago.

Algunos ejemplos:

O otras opciones como por ejemplo algunas fuentes que incluso se pueden encontrar en google fonts.

Dominado el ejemplo de esta publicación se entienden rápidamente todos los demás.

Entremos en materia.

Concretamene me voy a centrar en fontawesome.

Como instalar fontawesome en nuestra página web

Existen dos formas para instalar fontawesome y poder usarlo en nuestra página web

El secreto está en entender el concepto de acoplamiento de una hoja css mediante la etiqueta <link>.

Esta entrada puede ayudarte si no estás familiarizado.

Primer método: Importar fontawesome directamente desde su servidor

El código (que encontraréis en la web de fontawesome) que hay que poner dentro de <head></head> de tu página web es

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Segundo método: Descargar todo y cargarlo directamente desde nuestro propio hosting / ordenador

Paso 1: descarga todos los archivos de fontawesome.

Other ways to use fontawesome

Paso 2. Instalalos en tu página web. Te adjunto captura de como me ha quedado a mi.

Fíjate que he modificado el nombre de la carpeta por fontawesome. Escribe en tu caso lo que mejor te parezca.

Es importante que hagas este paso porqué fontawesome funciona en base a hojas de estilo que importan una tipografía y es necesario que no se rompa la estructura de carpetas que en su día decidieron las mentes pensantes de la empresa fontawesome.

Como usar iconos de fontawesome (o parecidos) en una página web 1

Paso 3: En la cabecera de tu documento web (<head></head>) escribe

<link rel="stylesheet" href="[nombreCarpetaFontAwesome]/css/all.css">

Es parecido al primer método salvo que ahora all.css se carga internamente.

El principio que hace que fontawesome y parecidos funcionen en nuestra página web

Muy bien. Una vez llegados aquí…. ¿como se usa?

Las palabras mágicas son hoja de estilos y tipografía.

Puedes leer la documentación de fontawesome o mucho mejor… destripar el archivo all.css dónde está el código.

A continuación adjunto algunos fragmentos relevantes de su hoja de estilos.

/*siempre que queremos poner un icono hay que llamar a .fa o .fas porqué en realidad lo que hacen es llamar la font-family.*/
.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

/* a continuación hay que poner la instrucción concreta de cada icono. fijaros que en realidad mediante el pseudo-selector ::before introducimos contenido delante de la etiqueta*/

.fa-thumbs-down:before {
  content: "\f165"; }

.fa-thumbs-up:before {
  content: "\f164"; }

/*si estás familiarizado con los breakpoints de bootstrap esto te gustará*/
.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

/*poner el icono a la izquierda o a la derecha*/
.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

Si entiendes de css… ¿viendo el código anterior ahora se ve todo más fácil verdad?

Ejemplos de uso de fontawesome

Algunos ejemplos de uso dentro del <body></body>

<span class="fas fa-bars"></span>
<i class="fas fa-thumbs-up"></i>
<div class="fa fa-bars fa-4x fa-border"></div>
Como usar iconos de fontawesome (o parecidos) en una página web 2
resultado instrucciones ejemplo

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 3.4 / 5. Votos: 8

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comments
  • jose sanchez
    Posted at 09:59h, 06 febrero Responder

    Hola Francesc, gracias por seguir apoyándonos en la programación.
    Con ayuda como la tuya, me sirve para seguir personalizando mi porfolio.
    un saludo

Post A Comment