Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

En este post vamos a ver 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.

 

 

 

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 es el siguiente:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

Añadir fuente awesome a wordpress y divi

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

 

Font Awesome códigos

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 a poner en icono fuente awesome

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)

 

 

4.3.- AÑDIR ICONOS EN LOS ITEMS DE MENÚ

 

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 elemento del menú para poner el icono

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ú.

 

Poner iconos en los elementos del menú wordpress

 

 

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.

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto. Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies