23 Mar Como usar iconos de fontawesome (o parecidos) en una página web
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.
También hay otras empresas y alternativas que ofrecen paquetes de iconos. Gratuitas o de pago.
Algunos ejemplos:
- glyphicons (és la librería que bootstrap incluye por defecto)
- iconmoon.io
- ionicons
- octicons
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.
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>
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
jose sanchez
Posted at 09:59h, 06 febreroHola Francesc, gracias por seguir apoyándonos en la programación.
Con ayuda como la tuya, me sirve para seguir personalizando mi porfolio.
un saludo
Francesc Ricart
Posted at 22:46h, 07 febrero¡me acuerdo mucho de ti!
un gran saludo jose 🙂