Cómo agregar fácilmente fuentes de iconos en tu tema de WordPress

¿Desea agregar fuentes de iconos en su sitio de WordPress? Recientemente, uno de nuestros usuarios nos preguntó cuál es la forma más fácil de agregar fuentes de iconos en su tema de WordPress. Las fuentes de iconos te permiten agregar iconos vectoriales sin ralentizar tu sitio web. En este artículo, le mostraremos cómo agregar fácilmente fuentes de iconos en su tema de WordPress.

¿Qué son las fuentes de iconos y por qué debería usarlas??

Las fuentes de iconos contienen símbolos o pictogramas en lugar de letras y números. Estos pictogramas se pueden redimensionar fácilmente usando CSS sin aumentar significativamente el tamaño de descarga de su página.

Las fuentes de iconos se pueden utilizar para mostrar los símbolos más utilizados. En un sitio web típico, puede usarlos para su carrito de compras, botones de descarga, cuadros de funciones, controles deslizantes, botones de redes sociales e incluso en los menús de navegación de WordPress.

Hay varias fuentes de iconos gratuitas y de código abierto disponibles con cientos de iconos. De hecho, cada instalación de WordPress viene con el conjunto de fuentes del icono de dashicons gratis. Estos iconos se utilizan en la barra de herramientas de administración de WordPress dentro del área de administración.

Algunas otras fuentes de iconos populares son:

• Fuente impresionante
• Genericons
• IcoMoon
• Linearicones

Por el bien de este tutorial, usaremos FontAwesome. Es la fuente de icono más popular, gratuita y de código abierto disponible, y también la usamos en nuestro constructor OptinMonster.

Vamos a cubrir dos formas de agregar fuentes de iconos en WordPress. El primer método utilizará un complemento y el segundo le mostrará cómo agregar una fuente de icono sin un complemento..

Agregar fuentes de iconos en WordPress usando complementos

FontAwesome y otras fuentes de iconos gratuitas son compatibles con muchos complementos de WordPress. El uso de un complemento le permite agregar fácilmente una fuente de icono a cualquier tema de WordPress sin modificar ningún código.

Lo primero que debes hacer es instalar y activar el complemento Better Font Awesome. Tras la activación, puede visitar Ajustes »Mejor fuente impresionante página para configurar los ajustes del plugin. Sin embargo, el complemento funciona de forma inmediata, por lo que la mayoría de los usuarios no necesitan cambiar nada allí..

Better Font Awesome te permite agregar íconos de fuentes usando códigos cortos como este:

[icon name = "rocket"]
[icon name = "cloud"]
[icon name = "headphones"]

También puede agregar los íconos en el editor de publicaciones simplemente seleccionando un ícono. Continúe creando una nueva publicación o edite una existente, y verá la Botón Insertar icono.

Al hacer clic en él aparecerá una ventana emergente donde puede localizar un icono e insertarlo.

Notará que el complemento agregará un shortcode en su editor de publicación que se verá así:

[icon name = "university"]

Si desea personalizar aún más el icono, puede agregar su propia clase CSS para agregar estilos personalizados.

[icon name = "university"]

Ahora puede aplicar un estilo al icono utilizando CSS en su tema o en la hoja de estilo del tema infantil.

 .fa-universityicon font-size: 100px; color: # FF6600;  

Es así de simple.

Ahora veamos cómo puede agregar fuentes de iconos en WordPress sin un complemento.

Agregando fuentes de iconos manualmente en WordPress

Como mencionamos anteriormente, las fuentes de iconos son solo fuentes y se pueden agregar a su sitio como si fuera a agregar cualquier fuente personalizada.

Algunas fuentes de iconos como Font Awesome, están disponibles en los servidores CDN de la web y se pueden vincular directamente desde su tema de WordPress.

También puede cargar todo el directorio de fuentes en una carpeta en su tema de WordPress y luego usar esas fuentes en su hoja de estilo..

Ya que estamos usando Font Awesome para este tutorial, te mostraremos cómo puedes agregarlo usando ambos métodos..

Método 1:

Este es el más fácil. Todo lo que tienes que hacer es agregar esta única línea de código en el tema de tu tema. header.php archivo justo antes de la etiqueta.

Este método es el más simple, pero puede causar conflictos con otros complementos..

Un mejor enfoque para cargar hojas de estilo o scripts en WordPress es ponerlos en cola correctamente.

En lugar de vincularse a la hoja de estilo de la plantilla de encabezado de su tema, puede agregar el siguiente código en el archivo functions.php de su tema o en un complemento específico del sitio.

 función wpb_load_fa () wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Método 2:

El segundo método no es el más fácil, pero le permitiría tener las fuentes dentro de su tema.

Simplemente descargue las fuentes de iconos y descomprima el paquete. Ahora deberá conectarse a su sitio web mediante un cliente FTP y ir al directorio de su tema de WordPress.

Necesitas crear una nueva carpeta allí y nombrarla fuentes. A continuación, debe cargar el contenido de la carpeta de fuentes del icono en el directorio de fuentes de su servidor.

Ahora está listo para cargar fuentes de iconos en su tema de WordPress. Simplemente agregue este código al archivo functions.php de su tema o en un complemento específico del sitio.

 función wpb_load_fa () wp_enqueue_style ('wpb-fa', get_stylesheet_directory_uri (). '/fonts/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Has cargado correctamente Font Awesome en tu tema de WordPress.

Ahora viene la parte en la que agregará íconos reales a su tema, publicaciones o páginas de WordPress.

Visualización manual de las fuentes de los iconos en WordPress

Vaya al sitio web de Font Awesome para ver la lista completa de iconos disponibles. Haga clic en el ícono que desee usar y podrá ver el nombre del ícono.

Copia el nombre del ícono y úsalo así en WordPress.

Puede diseñar este icono en la hoja de estilo de su tema de la siguiente manera:

 .fa-optin-monster font-size: 50px; color: # FF6600;  

También puedes combinar diferentes íconos y decorarlos al mismo tiempo. Por ejemplo, supongamos que desea mostrar una lista de enlaces con iconos junto a ellos. Puedes envolverlos bajo un elemento con una clase específica.

  Casa Biblioteca Aplicaciones Ajustes  

Ahora puedes aplicarles un estilo en la hoja de estilos de tu tema de esta manera:

 .icons-group-item i color: # 333; tamaño de fuente: 50px;  .icons-group-item i: hover color: # FF6600 

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente fuentes de iconos en tu tema de WordPress. También puede querer echar un vistazo a nuestro tutorial sobre cómo agregar íconos de imagen con los menús de navegación en WordPress.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..