Para ilustrar listas, o para poner un simbolito , o un emoji … o los logos de las redes sociales . Una imagen vale más que mil palabras, y si es un iconito sencillo mejor que mejor.
Esto tiene algo de complicación, pero te guiaré paso a paso, y una vez lo desmenucemos y lo entiendas, verás que no es para tanto.
Existen muchos repositorios de iconos, pero nos vamos a centrar sólo en uno: Font Awesome. Esta web tiene más de 1600 iconos gratuitos que puedes usar (y de pago tiene muchos más).
Para empezar a usar Font Awesome en nuestro sitio web con Divi solo tendremos que pegar una línea de código en las opciones de Divi. Una vez hecho podremos utilizar el buscador de iconos de Font Awesome para copiar y pegar el código correspondiente a cada icono.
Vamos a ver cómo se hace paso a paso
Obteniendo el código de Font Awesome
- Entra en cdnjs.com y busca font-awesome en el buscador.
- Dale al símbolo </> (copy link tag) para que se te copie la línea de código.
- Entra en el panel de administración de WordPress de tu web, y ve a Divi > Opciones del Tema, en la pestaña Integración.
- Pega el código en la opción Agregar código al <head> de su blog.
Cómo añadir iconos de Font Awesome
- Entra en fontawesome.com/icons y busca el icono que quieras utilizar.
- Selecciona el icono que desees y haz clic en la línea de código, así se copiará.
- Accede a tu web, al lugar en el que quieras poner ese icono. Es una línea de código por lo que:
-
- Puedes pegarlo en un módulo de texto, pero usando la pestaña Texto (no visual).
- Puedes pegarlo en un módulo de código.
-
¡Ya está! Ya sabes lo básico, pero te voy a dar un bonus. ¿Cómo puedes cambiar el aspecto del icono?
Cómo cambiar el aspecto de los iconos
Aquí tienes unas cuantas formas de modificar el aspecto de los iconos. ¡Por supuesto, puedes combinar los códigos para por ejemplo cambiar el tamaño de un icono y rotarlo!
Cambiar el tamaño
Añade a la línea de código fa-2x para multiplicar su tamaño por 2. Cambia el número 2 por otro para conseguir más tamaños.
Hacer que gire
Añade fa-spin a la línea de código
Rota el icono
Añade a la línea de código fa-rotate-90 para girarlo 90 grados, o cambia el número 90 por 180 o 270 para conseguir otra rotación.
Voltea en espejo el icono
Añade a la línea de código fa-flip-horizontal o fa-flip-vertical.
Encuadrar el icono
Añade fa-border.
Cambiar el color
Aunque esto es un poco más complejo, puedes cambiar el color añadiendo style=»color: #ff0000″, cambiando #ff0000 por el color hexadecimal que quieras. Aquí tienes un selector de colores hexadecimales para que puedas elegir el color que quieras y copiar su código.