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

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

Print Friendly, PDF & Email
Valora esta entrada

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.

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>
resultado instrucciones ejemplo

¡Hola!

Querido lector,

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

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.