Cómo agregar iconos web a tu página

A la hora de diseñar una página web, necesitas una serie de recursos para conseguir que tu diseño tenga gancho y muestre la personalidad de tu proyecto.

Algunos de esos elementos de diseño web que puedes utilizar para que el resultado sea impactante son: cuadros, tablas, columnas, contadores, listados, pestañas o iconos (hay muchos más recursos).

Precisamente en estos últimos me quiero centrar en el post de hoy: los iconos web, y te voy a explicar diferentes formas de integrarlos en tus diseños.

Cómo insertar iconos web en tu página

Para insertar iconos web en tus diseños existen diferentes opciones y te voy a contar en qué consiste cada una de ellas.

Además, en un epígrafe posterior te voy a explicar cómo hacerlo específicamente si utilizas la plantilla Divi.

#1 Maquetador visual

Todos los plugins que existen para maquetar páginas en WordPress incluyen su propio paquete de iconos web.

Independientemente del maquetador visual para WordPress que utilices en tu sitio, debes saber que cada uno de ellos cuenta con su propios iconos.

Veamos cómo son cada uno de ellos:

Iconos web de Divi

Estos son los iconos que incluye el módulo anuncio (blurb):

Iconos web de Elementor

Aquí puedes ver algunos de los iconos que incluye. No están todos, por supuesto. Si hay algún fan de Elementor en la sala que me perdone, no he encontrado el pack completo.

Iconos web de Visual Composer

Aquí puedes ver algunos de ellos. Algo que quiero destacar es que VC incluye varios tipos de iconos: font awesome, font elegant, linea icons y dripicons.

Iconos web de Thrive Architect

Aquí puedes ver una muestra de los iconos que incluye el maquetador Thrive.

Iconos web de Page Builder by SiteOrigin

Selección de iconos del builder de SiteOrigin.

Iconos web Beaver Builder

Aquí una selección de iconos del editor Beaver Builder, que incluye tipos de 5 bibliotecas diferentes. Muy completo.

#2 Plantillas

Los temas para WordPress también suelen incluir sus propios iconos web que puedes utilizar en tus diseños.

Si no sabes qué plantilla utilizar en tu página, te dejo un par de recomendaciones:

Algunos ejemplos de iconos web en temas de WordPress:

#3 Plugins para insertar iconos

Si los iconos web que incluye tu editor visual y tu plantilla no te parecen suficientes, también existen plugins para insertarlos en tu diseño.

Te traigo dos opciones diferentes: un plugin gratuito y otro de pago:

Better Font Awesome

Este plugin gratuito te permite insertar en tu web los iconos de Font Awesome a través de CSS, shortcodes y el generador de códigos TinyMCE (plugin que te recomiendo tener instalado).

IconPress Pro

El nombre completo de este plugin premium es: IconPress Pro - Icon Management for WordPress.

Incluye más de 100.000 iconos en formato SVG para ser utilizados en WordPress a través de tu maquetador (es compatible con Beaver Builder, Elementor y Visual Composer -en Divi no lo he probado) y los propios shortcodes que genera.

Como puedes ver en la captura de arriba, los iconos web que incorpora son más atractivos que los del resto de plantillas y maquetadores.

Además, dispone de varios tipos de iconos: con color, fondo transparente, oscuros, etc.

#4 Herramientas online de iconos web

Otra opción muy interesante para agregar iconos a tu web son las herramientas online que proporcionan este tipo de recursos.

Por supuesto, existen varias opciones, pero te quiero hablar de coolsymbol.com, que es la herramienta que yo utilizo cuando necesito iconos diferentes a los habituales.

Esta página incluye cientos de iconos web que puedes insertar en tu sitio.

Solo tienes que seleccionar el que te gusta, poner el ratón encima para copiarlo y pegarlo en la parte de tu página que quieras.

Muy fácil, ¿verdad?

#5 Iconos Font Awesome

Font Awesome es una fuente tipográfica de código abierto que dispone de miles de iconos web totalmente gratuitos para temas comerciales, plugins y proyectos online.

Exactamente ofrece 3.978 iconos de tres estilos diferentes. Puedes verlos todos en la web: fontawesome.com/icons 

Para usarlos solo tienes que añadir un código en la plantilla de tu web, pero eso te lo explico más abajo 🙂

#6 Bancos de iconos

Si todavía no te he convencido con las opciones anteriores y necesitas más iconos web para tu página, te traigo dos bancos con infinidad de recursos.

• Flaticon: flaticon.com
• Icons8: iconos8.es

Ambos incluyen iconos libres de licencia que puedes encontrar de forma muy sencilla a través de un buscador.

Además, sus iconos  están organizados por categorías y también ofrecen paquetes con diferentes recursos.

Cómo insertar iconos web en Divi

Si utilizas Divi como plantilla o maquetador en tu página, a continuación te voy a explicar varias formas para añadir iconos web.

#1 Módulo anuncio

Como te he mostrado en el epígrafe anterior, el módulo anuncio de Divi incluye una serie de iconos web que puedes insertar con diferentes diseños:

Además, ofrece diferentes disposiciones posibles: superior, alineado a la izquierda, con fondo circular, sin fondo, etc.

#2 Plugins

También puedes añadir iconos web en Divi con plugins, en este caso específicos para esta plantilla.

Te voy a mencionar varias opciones, tanto gratuitas como de pago.

WP and Divi Icons

Este plugin gratuito te permite agregar más de 300 iconos nuevos al editor de WordPress y al módulo anuncios de Divi.

Aquí puedes ver un ejemplo de los iconos web que incluye este plugin:

FA Icons for Divi Builder Builder plugin

Este plugin gratuito, también conocido como Font Icons for Divi Builder, te permite añadir iconos de Font Awesome en el módulo anuncios de Divi.

Solo tienes que descargarlo desde aquí, instalarlo en tu web y configurarlo.

Aquí puedes ver un ejemplo de cómo quedan los iconos web Font Awesome en el módulo anuncios:

Divi Font Awesome

Con este plugin premium puedes llevar a tu plantilla Divi todos los iconos web directamente desde la biblioteca Font Awesome.

Aquí tienes un ejemplo de los iconos que puedes añadir a Divi con este plugin y de cómo es su resultado:

#3 Cómo añadir iconos Font Awesome en WordPress: tutorial

Por último, quiero explicarte paso a paso cómo añadir iconos Font Awesome a tu web sin necesidad de instalar ningún plugin.

Te lo explico con Divi, pero este tutorial sirve también para cualquier otra plantilla.

• Vincular tu web con la biblioteca de Font Awesome
  

Para ello, debes pegar dentro de la etiqueta <head> de tu web el siguiente código:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

En el caso de Divi, puedes hacerlo directamente en: Divi > Opciones de tema > Integration > Agregar código al <head>

Quedaría así:

• Insertar los iconos Font Awesome en tu web
  

Ahora que ya tienes tu sitio vinculado con Font Awesome, es el momento de insertar los iconos en tu página.

Para ello, debes ir a la web fontawesome.com/icons y seleccionar el icono que quieres añadir.

Por ejemplo, voy a hacer una prueba con el icono que se llama Archway.

Para insertarlo en tu web, solo tienes que copiar su correspondiente código (<i class="fas fa-archway"></i>) y pegarlo en un modulo de texto o de código.

Este sería el resultado:

• Insertar iconos Font Awesome en el menu de tu web

Otra opción muy interesante es crear un menú con iconos en cada una de sus pestañas.

El resultado sería algo similar a esto:

Para conseguir este resultado, solo tienes que pegar el código de cada icono en las correspondientes pestañas de tu menú. En el campo etiqueta de navegación:

En cada pestaña debes pegar el código correspondiente del icono web que quieras insertar.

• Personalizar los iconos Font Awesome
  

Por último, te dejo un código para que personalices los iconos Font Awesome que insertes en tu web:

.fa, .fas {
  color: #26bde8;
  margin-left: 25px;
  font-size: 20px;
}

En el caso de Divi, debes pegar este código en: Divi > Opciones de tema > CSS personalizado.

Este sería el resultado de los iconos con mayor tamaño, mi color azul corporativo y separados a la izquierda:

Por supuesto, puedes personalizar el tamaño, color y alineado modificando el código anterior.

Hasta aquí este repaso a todas las formas de añadir iconos web en tu sitio. Solo tienes que elegir la opción que mejor se adapta a tus necesidades y llevarlos hasta tu página 😉