Hoy en día, además de poder utilizar imágenes, también podemos utilizar icons fonts (fuentes o tipografías de textos) para incluir iconos en nuestras webs.
Sin duda, los iconos son parte fundamental de una web; atraen la atención del usuario mientras representan conceptos o acciones abstractas con símbolos.
¿Que ventajas tendrás al trabajar con Icon fonts?
Podemos personalizarlos fácilmente con CSS. En pocos segundos y sin necesidad de utilizar programas cómo photoshop o illustrator podemos modificar; color, fondo, tamaño, posición… Lo puedes ver el el siguiente post.
Escalarlos sin perder calidad. Al ser fuentes, los iconos son tratados como objetos vectoriales y podemos aumentar o reducir su tamaño sin perder calidad.
Seguro que has visto este error otras veces; abres una web en tu dispositivo móvil y ves imágenes, iconos e incluso logotipos pixelados. En los casos de las pantallas de móviles iPhone, como tienen doble retina, necesitan imágenes con el doble de tamaño o resolución para que se vean correctamente. Aquí tienes un post con más información acerca del tema: http://www.cristalab.com/blog/que-significa-retina-display-en-el-diseno-web-c108299l/
Velocidad de carga. Cada vez que cargamos una imagen en nuestra web, sea del tamaño que sea, estamos realizando una petición al servidor. Utilizando un paquete de icon Fonts sólo hacemos una y optimizamos la carga.
Hay muchos Icon fonts. En este post explicaré como utilizar FontAwesome en nuestra web. Esta fuente tiene muy buena integración con Bootstrap y dispone de una gran cantidad de iconos. Aquí tienes algunas webs de referencia:
FontAwesome
Página oficial de Font Awesome
http://fontawesome.io/icons/
Listado de valores de cada icono de Font Awesome
http://astronautweb.co/snippet/font-awesome/
En primer lugar, debemos cargar en la etiqueta <head> de nuestro archivo HTML el fichero .css que carga estas fuentes y estilos para mostrar todos los iconos.
|
1 2 3 |
.... <link rel="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> |
Cómo añadir un icono con Font Awesome
Como puedes ver en la web oficial, para incluir un icono puedes usar la etiqueta i con dos clases; la primera: la clase fa, carga reglas generales para todos los iconos, mientras que la segunda clase: fa-phone, carga el contenido a mostrar en el pseudo elemento :before. Los pseudo-elementos :before y :after se utilizan en combinación con la propiedad content de CSS para añadir contenidos antes o después del contenido original de un elemento.
|
1 |
<i class="fa fa-camera-retro"></i><i class="fa fa-phone"></i> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; /* Especificamos que fuente utilizar*/ font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-address-book:before { content: "\f2b9"; /* Este valor está asociado al icono de teléfono*/ } |
Resultado
Otro ejemplo
|
1 |
<i class="fa fa-bed"></i> |
Resultado
Podemos cambiar el tamaño de nuestros iconos simplemente añadiendo las siguientes clases fa-lg,fa-2x,fa-3x,fa-4x y fa-5x. La clase fa-lg aumenta el icono un 33%. Mientrás que las otras multiplican su tamaño por el número que aparece al final de la clase:
|
1 2 3 4 5 6 |
<i class="fa fa-phone fa"></i>96 656 ... .. <i class="fa fa-phone fa-lg"></i>96 656 ... ... <i class="fa fa-phone fa-2x"></i>96 656 .. ... <i class="fa fa-phone fa-3x"></i>96 656 ... ... <i class="fa fa-phone fa-4x"></i>96 656 ... ... <i class="fa fa-phone fa-5x"></i>96 656 ... ... |
Resultado
96 656 … ..
96 656 … …
96 656 .. …
96 656 … …
96 656 … …
96 656 … …
También podemos utilizar iconos dentro de nuestros párrafos o artículos añadiendo estas clases fa-pull-right o fa-pull-left, Por ejemplo:
|
1 |
<i class="fa fa-spinner fa-2x fa-spin" aria-hidden="true"></i> |
Resultado
Integración con Bootstrap
Además como te decía al principio del post, se integran perfectamente con los elementos de Bootstrap:
Personalizar colores, tamaños y fondos
Estarás de acuerdo conmigo en que trabajar con esta librería facilita mucho las cosas, pero ¿qué sucede si queremos personalizar o darle un toque más profesional a nuestros iconos? Tranquilo he preparado un artículo donde te dejo algunos ejemplos con los que aprenderás a sacarle el máximo partido a estos iconos y a CSS. Puedes leerlo aquí
Mil gracias por la información, fue de gran ayuda!!!!
Me alegro Josue. Gracias por visitar y comentar
se puede utilizar el fa icon como link?
Si. Simplemente tendrías que añadir el icono dentro de las etiquetas . El resultado sería algo así: