| 1228 Visites
Desde la implantación del diseño de páginas web responsive se han ido adquiriendo cada vez más conocimientos y los diseñadores web han ido prescindiendo cada vez más de las imágenes de bits (png, jpg y gif) para sustituirlo por imágenes vectoriales escalables para mejorar la usabilidad del usuario en función del dispositivo con el que esté navegando.
Font Awesome es una herramienta muy útil para implementar en tu página web. Se trata de un proyecto que consiste en la utilización de la propiedad @ font-face y la etiqueta <i></i> de CSS3 y Html5. Esta nos permite la utilización de sus bancos de imágenes escalables.
Si ya utilizas el Framework “Bootstrap” la tarea es muy sencilla porque ya está implementado en este framework y sólo deberás buscar los iconos que necesites y implementarlos mediante el código Html5 que te da la propia herramienta.
Aquí tienes dos ejemplos:
<i class=”fa fa-camera-retro”></i>
<i class=”fa fa-apple”></i>
Si no utilizas el framework “Bootstrap”:
Pega la etiqueta siguiente a la cabecera de tu página web entre el <head> </head>.
<link href=”http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css” rel=”stylesheet”>
Una vez hecho esto ya podrás utilizar muchos de los iconos de Font Awesome. Si necesitas más iconos también puedes descargarte el proyecto con todas sus capacidades y instalarlo en tu servidor tal y como se explica en su página oficial: Font Awesome
Artículo escrito por Argar Jorba
Diseñador gráfico y desarrollador web especializado en páginas web y tiendas online.
Si te gustan mis artículos y quieres consejos más valiosos, no dude en hacer una donación.
