Hace poco he necesitado echar mano a la típica
imagen del carrito de la compra para realizar una página web, sin embargo
ninguna de las imágenes quedaba bien con el tema, ni se amoldaba bien con el resto de elementos de la web. Por ello, busqué en Internet
maneras alternativas de realizar este carrito de la compra y me encontré desde más imágenes hasta mi amado
ASCII ʕ•ᴥ•ʔ. Al final di con Font Awesome, una fuente que utilizada de la forma adecuada te puede sacar de muuuuuuchos aprietos.
A continuación, te voy a explicar en qué consiste
Font Awesome y cómo podrías utilizarla
en tu página web por si te llama la atención.
¿Qué es Font Awesome?
Font Awesome es un conjunto de
herramientas de CSS utilizada para la creación de logos, tanto para redes sociales, como para carritos de la compra (bieeen) o para acompañar a algún texto con un sobre, bandera, lupa, lo que sea.
En total hay
605 iconos utilizables a partir de Font Awesome, con ellos puedes hacer que tu página web sea la más guapa de tu sector y atraiga así a posibles leads para tu negocio.
Font Awesome funciona mediante
Bootstrap, aunque a día de hoy
no es necesario tenerlo para hacerlo funcionar, pero recomiendo que lo instales y que es otra herramienta de diseño bastante útil y bonita que fue desarrollada si no me equivoco por varias personas del equipo de
Twitter.
Debido a su diseño, puedes poner el
icono que quieras en el tamaño que quieras sin perder apenas calidad al tratarse de un vector. Además Font Awesome no dará problemas a la hora de diseño como dan otro tipo de fuentes similares.
¿Cuánto vale Font Awesome?
Esta pregunta seguro que os la estaréis haciendo, estaréis diciendo que estos 605 iconos van a tener un precio desorbitado ya que para adquirir iconos iguales en formato png o jpg valen su dinero si lo queremos de una calidad mínima (y sin incumplir la ley).
Pues nada más lejos de la realidad,
el precio de esta fuente es 0 €, sí, es completamente
GRATIS, por lo que si eres de la virgen del puño como un servidor será tu mejor amigo en cuanto a iconos web se refiere.
Configurar Font Awesome en tu Página Web
Pasamos ya al punto más importante y el cual quiero desarrollar en formato de
mini guía para que
poner esta fuente en tu web sea lo más sencillo posible. Bien, empecemos:
1. Lo primero que haremos es, si tenemos BootstrapCDN en nuestro servidor web instalado insertar la
siguiente línea de código dentro de la etiqueta <head> de las páginas donde vayamos a utilizar la fuente.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Si no tenemos Bootstrap instalado, podemos
descargar la carpeta con los archivos de Font Awesome y
subirla vía FTP a nuestro servidor web. Tras subirla, deberemos poner también la
siguiente línea de código entre nuestras etiquetas de <head>:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
2. Al tenerlo instalado
ya podremos utilizarlo, y ¿cómo? os preguntaréis pues aquí os voy a dejar
varios métodos para poner vuestros iconos en vuestra página web.
3. Para poner un simple icono, de los que nos ofrece Font Awesome en su lista, solamente tendremos que poner el siguiente código. Para introducir
código en sitios WordPress deberemos dar a la
opción de Texto de nuestro editor de páginas.
<i class="fa fa-camera-retro"></i>
Al poner ese código haremos que aparezca el
icono de una cámara en nuestra web, pero ¿y si queremos un carrito de la compra? Pues fácil, simplemente nos vamos al
repositorio de Font Awesome, buscamos el carrito que prefiramos y ponemos su código.
En este caso la línea de código que pondríamos sería:
<i class="fa fa-shopping-cart"></i>
4. Y ya está así de
fácil sería poner un icono, pero Font Awesome te
ofrece más opciones para hacer con sus iconos como por ejemplo rotarlos, hacer que se muevan, añadirlos a una lista, etcétera, etcétera, etcétera.
5. Para finalizar esta mini guía os voy a enseñar como
aumentar el tamaño de los iconos de Font Awesome. Para hacer esto lo único que deberemos hacer es
añadir al código que hemos puesto antes fa-lg, fa-2x, fa-3x, fa-4x... según el tamaño que queramos, cuanto más alto sea el número, más grande será el icono. Un ejemplo de línea de código para esto sería.
<i class="fa fa-camera-retro fa-5x"></i>
Con ese código tendremos una cámara gigante en forma de icono en nuestro sitio web. Os voy a dejar una
imagen comparativa de los tamaños. Está desde el estándar hasta el fa-5x.
6. Ahora sí que finalizo la guía pero eso sí compartiendo como realizar los otros tipos de icono que he mencionado por si
necesitáis alguno de ellos en vuestra web. Podéis consultar cómo hacerlos a través del siguiente enlace:
http://fontawesome.io/examples/
Si tienes alguna duda sobre cómo
configurar tu sitio web, o cómo hacer un buen diseño del mismo, puedes
apuntarte a uno de nuestros
cursos de las
principales plataformas Ecommerce para aprender a modificar esos parámetros además de para dominar las herramientas y realizar tu negocio con una de esas plataformas.
También te puedes
apuntar a nuestro Máster en Ecommerce y Marketing Digital que celebramos tanto de forma
presencial en Elche, Madrid y Albacete como de forma
online.