Cómo añadir iconos a Webflow

En este tutorial vamos a ver cómo podemos podemos utilizar iconos en nuestra web de Webflow con unos sencillos pasos.

Webflow no permite el uso de font awesome de forma nativa, por lo tanto, si queremos añadir iconos a nuestro sitio, tendremos que descargar los iconos como imágenes para posteriormente subirlos a la plataforma y ajustaremos los atributos como altura y anchura.

A continuación te describo el proceso de una forma más detallada.

Uso de iconos en Webflow

Cuando creamos una web, sobretodo si se trata de un gestor de contenidos que tiene que repetir una estructura a nivel diseño, una parte fundamental del diseño son los iconos. Estos iconos permiten al usuario intuir información que va relacionada al mismo.

Por ejemplo, cuando en instagram vemos el icono del corazón, sabemos que hace referencia al botón de me gusta.

En Webflow, si queremos añadir un icono a nuestra web, tendremos que hacerlo a través de imágenes ya que no permite el uso de la fuente «font awesome».

Una caso de uso real, es el ejemplo de Vatui donde hemos añadido la funcionalidad de CMS de webflow y estamos cargando diferentes proyectos creados en la web.

Cada uno de estos iconos representa un campo de la información que compone cada proyecto, podemos identificar la etiqueta, el calendario, o el icono de Twitter que indica el nombre del usuario creador del proyecto.

Buscar y descargar iconos gratis para webflow

Lo primero que tendremos que hacer es buscar los iconos que queremos añadir a Webflow. Para ello, podremos encontrar diferentes librerías de iconos gratis:

• FontAwesome: Página principal de la fuente que contiene las diferentes librerías de iconos
• Flaticon: Permite descargar iconos en formato PNG
• FA2PNG: Permite descargar iconos de Font Awesome cambiando el color de los mismos

Subir imágenes de iconos a Webflow

Para poder utilizar nuestros iconos en Webflow tenemos que subir la imagen previamente descargada a la plataforma.

Para ello, iremos a la sección Assets que encontraremos en el menú lateral de la izquierda y subiremos el fichero que contendrá el icono. Una vez subido, ya podremos arrastrar la imagen a la posición deseada y darle el tamaño que queramos (Normalmente es 16x16px)

Conclusiones

Cómo has podido ver, en Webflow no se pueden utilizar los iconos de Font Awesome de manera nativa. Si quieres utilizarlos tan solo tendrás que:

1. Descargar el icono en formato de imagen que prefieras
2. Subirlo como imagen a través del gestor de assets de Webflow
3. Arrastrar y configurar las propiedades como color y/o tamaño.

Espero que este post te sea de utilidad. Cualquier duda que te surja escríbela en los comentarios y te contestaré lo antes posible.