En primer lugar, en el apartado 0.- vamos a ver cómo añadir iconos al menú de WordPress gracias al plugin gratuito Menú Icons by Themelsle. Después, en el resto de apartados, veremos una forma algo más compleja pero que nos servirá para añadir iconos al menú, al footer, barra lateral, y cualquier sitio donde podamos escribir HTML. Analizaremos como añadir fuentes de iconos a WordPress y como añadirlos posteriormente a los elementos del menú o a otros sitios de la página web como también podría ser el footer.
En este enlace te dejo otro post con efectos sobre iconos con la plantilla divi.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE DEL POST
Instala y activa el plugin gratuito Menú Icons by Themelsle que te permitirá añadir iconos de manera muy sencilla a los items de menú de wordpress. Cuando vayas a «Apariencia > Menús» y despliegues un elemento de menú, verás que tienes un enlace denominado Icon: Select, que te permitirá elegir un icono y asociarlo al item de menú.
Aquí te dejo un vídeo sobre el sencillo uso de este plugin. El vídeo está en inglés, pero da igual, porque simplemente víendo el vídeo te va a sobrar para entender su funcionamiento
1.- DESCARGAR Y PREPARAR LA FUENTE DE LOS ICONOS
En primer lugar debemos añadir a WordPress la fuente de iconos que queramos utilizar. Aquí tienes dos fuentes de iconos diferentes:
a.- Fuente Awesome (font Awesome): esta fuente de iconos es la más fácil de implementar y también es una de la fuentes más conocidas y utilizadas.
En el siguiente enlace puedes ver todos los iconos de Font Awesome
b.- Fuente de icomoon: Esta fuente es más complicada de implementar, por lo que si no te quieres complicar mucho la vida utiliza la fuente Awesome. Para la fuente icomoon, descárgala en el siguiente enlace la fuente o biblioteca de iconos de icomoon.
En la siguiente página, justo antes de los comentarios tienes una imagen de cada icono junto al nombre de la clase que lo define y el código Unicode.
Esta es la biblioteca que vamos a utilizar de ejemplo en el post.
c.- Fuente de Elegant themes: En el siguiente enlace puedes descargar la fuente o biblioteca de iconos de Elegant themes que se utiliza en la plantilla Divi.
En esta página tienes imágenes de los iconos, el código Unicode de cada uno y el nombre de la clase de todos ellos.
2.- FUENTE AWESOME (Font Awesome)
Para implementar esta fuente solo tendrás que pegar un código en la página de integración de Divi. El código lo tienes que pegar en: «Divi > Opciones del tema»
A continuación haz clic en la pestaña «Integration» y pega el código en el campo de texto: «Agregar código al <head> de su blog»
El código que tienes que añadir va cambiando, lo puedes ver y copiar aquí):
Cómo integrar la font Awesome con Divi
3.- FUENTE ICOMOON (Font Icomoon)
Vamos a ver en estos apartados como implementar la fuente Icomoon.
3.1 COPIAR EL CODIGO DEL STYLE.CSS DE LA FUENTE EN EL STYLE.CSS DE WORDPRESS
Localiza el archivo “style.css” suministrado con la fuente de iconos que te hayas descargado. Abre el archivo con un editor de código (por ejemplo notepad++), copia todo el contenido y cópialo en tu archivo style.css.
Lo más recomendable es utilizar un child theme o tema hijo y copiar el código en el interior de dicho archivo. Aquí te dejo un enlace a un interesante post donde se habla sobre los temas hijo. El tema hijo lo tendrás en: wp-content > themes > “tema hijo”
Puedes conectar vía FTP y modificar el archivo o través del editor de wordpress situado en: «Apariencia > Editor»
Si no tienes un child theme pues tendrás que copiar el código en el archivo style.css de tu plantilla. La plantilla estará situada en: wp-content > themes > “plantilla utilizada”.
3.2.- COPIAR EL DIRECTORIO “FONTS” EN EL DIRECTORIO DE LA PLANTILLA
Ahora debes copiar el directorio “fonts” (con todo su contenido) incluido en la carpeta que te has descargado e incluirla en el directorio de tu plantilla.
Si utilizas una plantilla hijo o child theme tendrás que incluir el directorio fonts en el directorio del tema hijo o child theme.
Si tu plantilla ya tiene una carpeta o directorio fonts, copia el contenido del directorio en el directorio fonts de tu plantilla.
4.- USAR LAS FUENTES DE ICONOS EN WORDPRESS
Vamos a ver ahora diferentes maneras y lugares donde utilizar los iconos de la fuente Awesome e Icomoon en tu instalación de WordPress.
4.1.- AÑADIR ICONOS EN POST, PÁGINAS O WIDGETS
Fuente Icomoon: Abre un post, una página o un widget y en el editor HTML escribe por ejemplo el código:
<span class="icon-phone"></span>
Guarda y dale a vista previa. Te debe aparecer un icono de un teléfono (este ejemplo es usando la biblioteca de icomoon).
Más adelante veremos cómo personalizar el diseño del icono cambiando tamaño, color, etc.
Fuente Awesome: Si utiliza la fuente aweome puedes poner por ejemplo:
<i class="fa fa-phone-square"></i>
Si tienes algún problema con el editor visual puedes desactivarlo en “Usuarios > todos los usuarios”. Buscas tu perfil de usuario y le das a “editar”. Verás que en la parte superior tienes una opción para desactivar el editor visual.
Mi recomendación es que uses el editor de texto para crear la página, luego añadas los iconos en la pestaña HTML del editor y que ya no cambies al modo VISUAL del editor, ya que probablemente al cambiar al modo visual se borre el código.
4.2.- CÓDIGOS DE ICONO FUENTES AWESOME E ICOMOON
El procedimiento es el mismo para añadir iconos en cualquier parte de la web, ya sea menú superior, en widgets o en la barra inferior del footer.
¿Pero dónde puedo encontrar los códigos correspondientes a cada icono?
Fuente Awesome: para conocer los códigos de los iconos de la fuente Awesome ves a esta página donde aparecen todos los iconos: Iconos Awesome
Iconos Fuente Awesome
Tienes un buscador muy interesante en la parte superior, para buscar iconos (busca en inglés)
Haz clic en el icono que quieras y se te mostrará el código que debes utilizar.
Código de un icono de la font Awesome
Fuente Icomoon: para conocer los códigos de la fuente icomoon ve a esta dirección: Fuentes icomoon
A continuación selecciona los iconos cuyo código quieras conocer y haz clic en «Generate Font F» (enlace situado abajo a la derecha)
Ahora pon el ratón sobre uno de los iconos y haz clic en «get code» (el campo HTML es el que te interesa)
Para añadir un icono a los elementos del menú de wordpress debes ir a: “Apariencia > Menús”.
Añade un elemento al menú y en la etiqueta de navegación incluye el código del icono que quieras añadir (ya sea de Awesome o icomoon) delante del texto del ítem de menú. Por ejemplo :
<span class=»icon-phone»></span> Servicios
Añadir código al item de menú
Guarda y refresca la página, verás como aparece el icono delante del ítem del menú.
4.4.- PONER UN ENLACE EN EL ICONO
Ahora te voy a poner un ejemplo de cómo podríamos poner un enlace asociado al icono cuando lo añadimos a una página, post o widget.
<a href=”http://www.google.es”><span class=»icon-phone»></span></a>
5.- PERSONALIZAR LOS ESTILOS DE LOS ICONOS ICOMOON
Para personalizar el diseño de los iconos deberás editar el archivo style.css de tu plantilla o de la plantilla hijo (en caso de que estés utilizando dicha plantilla). La ventaja de utilizar una plantilla hijo o child theme es que los cambios que hagamos en el archivo style.css no desaparecerán al actualizad la plantilla padre.
Vamos a cambiar el color del icono y el tamaño. Para ello vamos a utilizar el icono de megáfono de la biblioteca de icomoon.
Primero insertaremos el icono megáfono en una página, post o widget insertando el código:
<span class=»icon-megaphone»></span>
A continuación guardaremos e iremos a el archive style.css en la plantilla wordpress que estemos utilizando o en la plantilla hijo en caso de utilizar un child theme. Ahora buscaremos el código:
.icon-megaphone:before {
content: «\e021»;
}
Y cambiaremos el tamaño del icono a través del “Font-size” y el color a través de “color” dejando el código de la siguiente manera:
.icon-megaphone:before {
content: «\e021»;
font-size: 64px;
color: #AD1EB9;
}
5.1.- AÑADIR EFECTO HOVER SOBRE EL ICONO
En caso de que el anterior icono fuera un enlace te pongo un ejemplo de cómo podríamos introducir un efecto hover (efecto al poner el ratón sobre el icono) sobre el mismo a través del cual el color se hiciera más transparente.
.icon-megaphone:hover:before {
opacity:0.5;
}
5.2.- CREAR UNA CLASE CSS PARA VARIOS ICONOS
En caso de que queramos que varios iconos tengan unas comunes características de diseño, podríamos añadir a los css de cada icono las mismas características. Pero más rápido sería hacer que todos ellos además de pertenecer a la clase que lo identifica como icono pertenecieran a otra clase común donde se establecieran los elementos de diseño común.
Te pongo un ejemplo:
PARTE HTML
<span class=»icon-megaphone icono-grupo»>
PARTE CSS
.icono-grupo{
width: 25px;
color: #AD1EB9;
}
5.3.- EFECTOS MOVIMIENTO SOBRE ICONOS CON CSS
Ahora te voy a mostrar tres efectos de movimiento diferentes con CSS que puedes aplicar a los iconos.
Efecto pulse
Este efecto hace que el icono cambie el grado de trasparencia de su color de manera progresiva e intermitente.
HTML
Para añadir este efecto al icono tendrás que añadirle la clase “pulse” como te muestro en este ejemplo:
<span class=»icon-megaphone pulse»></span>
CSS
En el archive style.css de tu plantilla o de tu tema hijo tendrás que añadir el código que te puedes descargar en este enlace.
Efecto tick
Este efecto consiste en que el icono gire 365º en cuatro posiciones.
HTML
Para añadir este efecto al icono tendrás que añadirle la clase “tick” como te muestro en este ejemplo:
<span class=»icon-megaphone tick»></span>
CSS
En el archive style.css de tu plantilla o de tu tema hijo tendrás que añadir el código que te puedes descargar en este enlace.
Efecto sway
Este efecto hace que el icono se balancee reproduciendo un movimiento similar al de un barco en plena navegación.
HTML
Para añadir este efecto al icono tendrás que añadirle la clase “sway” como te muestro en este ejemplo:
<span class=»icon-megaphone sway»></span>
CSS
En el archive style.css de tu plantilla o de tu tema hijo tendrás que añadir el código que te puedes descargar en este enlace.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
He cargado los archivos fonts en la carpeta de mi tema y no visualizo las imagenes?
Hola Jose,
además de colocar la carpeta fonts en tu tema hijo debes copiar el código del archivo style.css incluido en la carpeta fonts en el archivo style.css de tu tema hijo.
En cualquier caso es cierto que la implementación de este sistema de iconos no es sencillo, por lo que he decidido que voy ampliar este post incluyendo un apartado dedicado a como incluir la fuente de iconos Awesome que se implementa de una manera muchísimo más sencilla.
La próxima semana voy a ampliar este post incluyendo como añadir la font Awesome de iconos.
Si quieres estar al tanto te puedes suscribir al blog
Un saludo
Hola Joaquín. He seguido los pasos para utilizar las fuente de icomoon:
– Descargar el CSS y añadir su contenido en el fichero wp-contents/themes/divi/style.css, y
– Copiar las fuentes en el directorio wp-contents/themes/divi/fonts
Pero cuando pongo el código del ejemplo:
No me sale nada.
Como ves estoy utilizando el tema DIVI ¿Se te ocurre cual puede ser el problema?
Gracias,
Antonio
Hola Antonio,
pues no se que puede ser, parece que has seguido los pasos correctamente.
Yo he utilizado también la plantilla Divi y me ha funcionado correctamente, prueba a ver poniendo otro código diferente te funciona. Prueba a añadirlos en diferentes sitios a ver si en alguno si te funciona.
Un saludo
Hola Joaquin, Muy interesante tu post.
Tengo una duda. Si quisiera añadir el icono de una bandera con una url a otra página con distinto idioma ¿como lo haría?
Muchas gracias y un saludo.
Hola Rubén,
Para tener la web en varios idiomas lo suyo es utiliar un plugin multilingue específico para ello como es WPML. Estos plugins disponen de diferentes tipos de selectores de idiomas, con banderitas o de otras formas.
Un saludo