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.
- Sobre el Autor
- Últimos artículos
Este artículo está escrito por el equipo de Ecommaster, primera escuela de comercio electrónico, creada en 2010.
