Los iconos pueden hacer que una página resulte más fácil de entender. Los vemos en botones, apartados de servicios, redes sociales, formularios o fichas de producto, y muchas veces nos permiten reconocer una acción antes incluso de leer el texto. Por ejemplo, un teléfono junto al número de contacto, un carrito en el botón de compra o una flecha para indicar que podemos seguir avanzando. Son detalles pequeños, pero bien utilizados ayudan a ordenar el diseño y a que el usuario encuentre lo que busca con menos esfuerzo.
Una de las bibliotecas que podemos utilizar son los iconos Bootstrap en WordPress. Bootstrap Icons incluye una buena cantidad de símbolos pensados para páginas web y no obliga a instalar todo el framework de Bootstrap para poder usarlos.
Dentro de la colección encontramos iconos para calendarios, usuarios, correos, teléfonos, archivos, carritos, redes sociales y muchas otras acciones habituales. Al estar creados como elementos vectoriales, podemos cambiar su tamaño sin que se vean pixelados, algo que viene bien tanto en móviles como en pantallas de mayor resolución.
Hay varias formas de añadirlos a WordPress. Podemos cargar la biblioteca y añadir CSS en WordPress para utilizarla en toda la web, instalar un plugin que simplifique el proceso o insertar un icono concreto al editar el HTML en WordPress. Otra posibilidad es trabajar con el archivo SVG cuando necesitamos ajustar mejor su apariencia.
La elección dependerá de lo que vayamos a hacer. Si solo necesitamos un icono en una página, quizá no compense cargar toda la biblioteca. Pero si vamos a usarlos en botones, menús y diferentes secciones, puede ser más cómodo dejarlos disponibles en todo el sitio. También conviene usarlos con algo de criterio. Un icono debería ayudar a reconocer una función, no estar ahí solo para llenar espacio. Y cuando una acción pueda generar dudas, es mejor acompañarlo con un texto claro en lugar de confiar en el símbolo.
En esta guía veremos distintas formas de integrar los iconos Bootstrap en WordPress y cómo añadirlos mediante CSS, plugins, HTML o archivos SVG en WordPress según lo que necesitemos en cada caso.
Tabla de contenidos
Que es Bootstrap
Bootstrap es un conjunto de herramientas pensado para facilitar la creación de páginas web. Incluye estilos CSS, funciones en JavaScript y componentes que ya vienen preparados para trabajar con botones, formularios, menús, tarjetas, columnas o ventanas emergentes.
Una de sus partes más conocidas es el sistema de cuadrícula. Gracias a este sistema podemos distribuir el contenido en filas y columnas que cambian según el tamaño de la pantalla. Así resulta más sencillo preparar una estructura con un diseño web adaptable que se vea bien en ordenador, tableta y móvil.
Bootstrap también nos ahorra tener que diseñar ciertos elementos desde cero. Si necesitamos un botón, por ejemplo, podemos partir de una clase ya creada y después cambiar el color, el tamaño o algunos detalles para adaptarlo a la web.
Utilizar alguna de sus herramientas no significa que tengamos que cargar Bootstrap completo en WordPress. Si lo único que buscamos es añadir iconos Bootstrap en WordPress, podemos incorporar solo la biblioteca de iconos y dejar fuera el resto de los archivos.
Bootstrap Icons está relacionado con el framework, pero puede funcionar por separado. Incluye una colección amplia de iconos vectoriales que podemos insertar mediante HTML, clases CSS o archivos SVG, aunque el tema o el constructor de la web no esté basado en Bootstrap.
Esto nos permite colocar un teléfono junto a los datos de contacto, añadir una flecha dentro de un botón, mostrar un carrito en una tienda o acompañar una fecha con un calendario. Como son iconos en HTML, podemos aumentar o reducir su tamaño sin que pierdan nitidez.
Iconos Bootstrap en WordPress
Los iconos Bootstrap en WordPress son símbolos que podemos añadir a distintas zonas de la web para representar una acción o acompañar cierta información. Aunque pertenecen a Bootstrap Icons, no es necesario instalar todo Bootstrap para empezar a utilizarlos.
La biblioteca reúne una gran cantidad de opciones. Hay iconos para teléfonos, correos, usuarios, calendarios, carritos, redes sociales, documentos, ubicaciones, candados, flechas y muchas otras acciones habituales.
Una de las razones por las que resultan prácticos es que están creados como gráficos vectoriales. Podemos cambiar su tamaño sin que se vean borrosos y ajustar detalles como el color, la posición o la separación mediante CSS.
Dentro de WordPress podemos colocarlos en lugares como:
- Botones y llamadas a la acción.
- Datos de contacto.
- Listados de ventajas o características.
- Menús y enlaces.
- Productos de WooCommerce.
- Formularios y mensajes informativos.
- Redes sociales en WordPress.
- Tarjetas de servicios.
Por ejemplo, un pequeño teléfono delante de un número permite reconocer enseguida que se trata de un contacto. En una tienda podemos añadir un carrito junto al botón de compra, mientras que una flecha puede ayudarnos a señalar que un enlace lleva a otra parte de la web.
Tenemos varias formas de insertarlos. Podemos cargar la hoja de estilos de Bootstrap Icons para utilizarlos en todo el sitio, apoyarnos en un plugin o añadir el SVG del icono que necesitemos. La elección dependerá del uso que vayamos a darles. Si estarán presentes en botones, menús y varias secciones, cargar la biblioteca completa puede ser lo más cómodo. Para uno o dos iconos aislados, suele tener más sentido trabajar con los SVG y evitar recursos que no vamos a usar.
También conviene que el símbolo no sea la única pista disponible. Algunos iconos se entienden con facilidad, pero otros pueden generar dudas. Cuando la acción no sea evidente, es mejor acompañarlos con una palabra o una etiqueta clara y tener en cuenta la accesibilidad en WordPress.
Utilizar Bootstrap Icons en WordPress con CSS
Aunque es posible descargar el paquete completo de iconos y alojar estos mismos en nuestro servidor web, la forma más fácil y rápida de utilizar estos iconos es utilizar su propio enlace de CDN. Este enlace más reciente para los iconos es el siguiente:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
Debemos insertar este enlace en el header de nuestro sitio, o encabezado según sí tenemos nuestro sistema en inglés o en español. Existen variedades de complementos gratuitos que podemos utilizar para insertar los enlaces a CSS en el encabezado, podríamos utilizar complementos para insertar en header de nuestro sitio, pero esto agregaría a todas las páginas internas de nuestro sitio la posibilidad de inserción de iconos, en caso de que necesitemos utilizarlos para páginas en específico es mejor por lo que vamos a ver dos opciones, una con un plugin que inserta en todo el sitio, y otra donde podamos seleccionar si queremos aplicarlo solo a ciertas páginas.
Plugin para insertar en todo el sitio Bootstraps icons
En caso de que tengamos elementos como, por ejemplo, en nuestro menú WordPress o header del sitio, como también el footer con ciertos elementos que se mantengan en toda la web. Es posible que necesitemos agregar este código de manera global, por lo que tenemos varias opciones de complementos para facilitarnos el trabajo, uno de estos es.
Una vez que instalemos este plugin siguiendo los pasos habituales de instalación, es decir, descargamos, instalamos y activamos. Si tenemos dudas de cómo hacer completo este proceso, tenemos una guía para ayudarte a cómo instalar plugins en WordPress. Una vez ya tengamos todo listo, podemos ingresar a la configuración de este plugin, para ello ingresamos a:
Ajustes > WP Headers and Footers
Y agregamos en el área correspondiente al header del sitio el código que activará los iconos de Bootstrap en WordPress, el cual ya hemos compartido antes.
Plugin para insertar en páginas de WordPress específicas Bootstraps icons
Para poder activar este código solo para las secciones que tenemos iconos en concreto y no en todo el sitio, podemos utilizar Header Footer Code Manager, un complemento que podemos encontrar en el repositorio de WordPress, o bien descargarlo e instalarlo, como ya hemos visto en la guía de cómo instalar plugins en WordPress.
Después de activar este plugin, vamos a agregar un nuevo elemento en el menú de administración del plugin, para ello ingresamos a la barra lateral HFCM. Pase el cursor sobre el menú HFCM y hacemos clic en la opción de Agregar nuevo. Una vez hacemos clic, vamos a ver dos opciones, una sección para establecer los parámetros del código que vamos a ingresar y la segunda parte ya es donde podemos ingresar el código de forma directa. También te puede ayudar este tutorial sobre añadir snippets en WordPress.
Entre las opciones tenemos que elegir:
Nombre del fragmento: aquí solo es una guía, para poder luego encontrar el fragmento que estemos utilizando, así que podemos indicarle el nombre de iconos Bootstrap o el que nos haga referencia a esto que estamos agregando.
Tipo de fragmento: en esta opción seleccionamos CSS en el menú desplegable.
Visualización del sitio: aquí es donde podemos aplicar este código solo a algunas páginas en específico, en lugar de decirle todo el sitio, vamos a cambiar esta opción por páginas específicas o entradas, dependiendo de donde necesitemos agregar estos iconos.
Ubicación: vamos a mantener la opción preseleccionada como cabecera para que el código se agregue al header del sitio.
Visualización en el dispositivo: de igual forma, dejamos activa esta opción para que se visualice en todos los tipos de dispositivos.
Después de configurar estos ajustes, vamos a necesitar ingresar el enlace CDN en la sección de abajo:
Una vez tengamos esto vamos a hacer clic en guardar y ya tendríamos nuestro código insertado en todo el sitio o en páginas en específico que necesitemos.
Insertar el HTML para agregar los iconos
Ya insertado el encabezado correspondiente, el siguiente paso es el de incrustar en un HTML los iconos en WordPress que queremos utilizar. Muy parecido a cómo lo hacemos en una iconografía de Font Awesome, al momento de agregar un icono de Bootstrap, debemos agregar su código específico, que consta del nombre y CSS correspondiente al mismo. Todo lo que se necesita es insertar en el código HTML el nombre de la clase CSS, para ello podemos utilizar cualquier módulo que permita insertar HTML personalizado. También podemos utilizar el vínculo a SVG o bien a la opción web, ya que al agregar el CDN en el header, este vincula ambas opciones.
Para tener una lista completa de iconos que podemos utilizar y su código específico, podemos ver la URL que provee Bootstrap para estos:
https://icons.getbootstrap.com
Insertar webfont
Esta es una de las opciones más sencillas y fáciles de utilizar, ya que solo necesitamos conocer el nombre de la clase CSS para que el icono funcione de forma correcta. Por ejemplo, el formato para agregar un icono de WhatsApp seria el siguiente.
<i class="bi bi-whatsapp"></i>
Se puede cambiar el tamaño y el color solo con agregar el CSS los estilos correspondientes:
<i class="bi bi-whatsapp" style="font-size: 5rem; color: blue;"></i>
Es posible el agregar iconos adicionales en el mismo bloque de HTML que hemos utilizado, de tal forma que se visualice una lista completa de iconos sociales, por ejemplo, si deseamos agregar hipervínculos a estos íconos, solo debemos agrupar los íconos con llamados de enlace en HTML. Por ejemplo, podemos ver un ejemplo donde agregamos tres iconos con sus respectivos enlaces.
<a href="https://www.facebook.com/"> <i class="bi bi-facebook" style="font-size: 5rem; color: blue;"></i> </a>
<a href="https://twitter.com/"> <i class="bi bi-twitter" style="font-size: 5rem; color: lightblue;"></i> </a>
<a href="https://www.yourtube.com/"> <i class="bi bi-youtube" style="font-size: 5rem; color: red;"></i> </a>Con esto obtendremos una apariencia como esta:
Siempre teniendo en cuenta que podemos modificar elementos, colores, tamaños, separaciones, etc. Solo debemos ir modificando el estilo de dichos iconos.
Insertar iconos en SVG
Para usar los iconos en formato SVG, al igual que los iconos previos, debemos insertar un código que contiene en este caso el SVG del icono y su clase CSS para que pueda ser visualizado de forma correcta. Para obtener esta información, tenemos que hacer clic en alguno de los iconos de la página de iconos generales de Bootstrap, luego copiar el código que indica SVG:
Este código debemos agregarlo dentro de uno que permite la visualización SVG, adicional vamos a poder cambiarle el color y otros elementos mediante el estilo, tenemos un ejemplo de este código aquí:
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="currentColor" class="bi bi-bicycle" viewBox="0 0 16 16" style="color: blue;">
<path d="M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-1.158A.5.5 0 0 1 11 4h1a.5.5 0 0 1 0 1h-.64l-.311.935.807 1.29a3 3 0 1 1-.848.53l-.508-.812-2.076 3.322A.5.5 0 0 1 8 10.5H5.959a3 3 0 1 1-1.815-3.274L5 5.856V5h-.5a.5.5 0 0 1-.5-.5zm1.5 2.443-.508.814c.5.444.85 1.054.967 1.743h1.139L5.5 6.943zM8 9.057 9.598 6.5H6.402L8 9.057zM4.937 9.5a1.997 1.997 0 0 0-.487-.877l-.548.877h1.035zM3.603 8.092A2 2 0 1 0 4.937 10.5H3a.5.5 0 0 1-.424-.765l1.027-1.643zm7.947.53a2 2 0 1 0 .848-.53l1.026 1.643a.5.5 0 1 1-.848.53L11.55 8.623z"/>
</svg>
Como podemos ver en el código tenemos al final del viewbox unos espacios referente a los estilos que podemos ir modificando para que se ajuste a lo que necesitamos.
Conclusión
Los iconos Bootstrap en WordPress pueden ayudarnos a dar más claridad a ciertos elementos de la web. Un teléfono junto a los datos de contacto, una flecha dentro de un botón o un carrito en una ficha de producto permiten reconocer una acción con más rapidez.
Para utilizarlos no hace falta cargar todo Bootstrap. Podemos añadir la biblioteca de iconos mediante CSS, instalar un plugin que se encargue de integrarla o trabajar con archivos SVG cuando solo necesitamos algunos símbolos concretos.
La elección dependerá del uso que vayamos a darles. Si los iconos aparecerán en distintas páginas, botones, menús o tarjetas de servicios, tener la biblioteca disponible en todo el sitio puede resultar cómodo. Pero si solo vamos a colocar uno o dos, quizá sea mejor insertar sus SVG y no añadir recursos CSS que no utilizaremos.
También conviene pensar si el icono se entiende por sí solo. Algunos símbolos son bastante reconocibles, pero otros pueden generar dudas. En botones, formularios o menús, lo más seguro es acompañarlos con un texto cuando la acción no sea evidente.
El diseño debería mantener cierta continuidad. Usar tamaños parecidos, respetar las separaciones y no mezclar demasiados estilos hará que los iconos se integren mejor con las distintas partes de la página web. Si cada uno tiene un color, una forma o una alineación diferente, podemos acabar creando más ruido que ayuda.
Antes de dar el trabajo por terminado, merece la pena comprobarlos en móvil, tableta y ordenador. Podemos utilizar algunas herramientas de diseño web responsive para revisar el resultado en diferentes tamaños de pantalla. Aunque no pierdan calidad al cambiar de tamaño, podrían quedar demasiado pequeños, desplazados o alejados del texto que acompañan.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
