Cómo añadir fácilmente fuentes de iconos en tu tema de WordPress

¿Quieres añadir fuentes de iconos en tu sitio de WordPress? Recientemente uno de nuestros lectores preguntó cuál es la forma más fácil de añadir fuentes de iconos en su tema de WordPress?

Las fuentes de iconos permiten añadir iconos vectoriales (redimensionables) sin ralentizar el sitio web. Se cargan como fuentes web y pueden ser estilizadas usando CSS.

En este artículo, te mostraremos cómo añadir fácilmente fuentes de iconos en tu tema de WordPress, paso a paso.

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

Las fuentes de iconos contienen símbolos o pictogramas en lugar de letras y números. Estos pictogramas pueden ser fácilmente añadidos al contenido del sitio web y redimensionados usando CSS. En comparación con los iconos basados en imágenes, los iconos de fuentes son mucho más rápidos, lo que ayuda a la velocidad general de tu sitio web de WordPress.

Las fuentes de los iconos pueden utilizarse para mostrar los iconos de uso común. Por ejemplo, puedes usarlos con tu carrito de compras, botones de descarga, cuadros de características, concurso de regalos e incluso en los menús de navegación de WordPress.

Hay varias fuentes de iconos gratuitas y de código abierto disponibles que tienen cientos de hermosos iconos.

De hecho, cada instalación de WordPress viene con el juego de fuentes de iconos de los dashicons gratis. Estos iconos se utilizan en el menú de administración de WordPress y otras áreas dentro del área de administración de WordPress.

Algunas otras fuentes de iconos populares son:

  • Font Awesome
  • Genéricos
  • IcoMoon
  • Linearicones
  • Iconos materiales de Google
  • El Proyecto Sustantivo

Por el bien de este tutorial, usaremos Font Awesome. Es la fuente de iconos gratuita y de código abierto más popular que existe. Usamos FontAwesome en el sitio web de WPBeginner así como nuestros plugins de WordPress como OptinMonster, WPForms, RafflePress, etc.

En esta guía, vamos a cubrir tres formas de añadir fuentes de iconos en WordPress. Puedes elegir la solución que mejor se adapte a ti.

Agregar fuentes de íconos en WordPress usando plugins

Si eres un usuario de nivel principiante que sólo intenta añadir algunos iconos a tus mensajes o páginas, entonces este método es adecuado para ti. No tendrías que modificar los archivos de temas, y podrías usar fuentes de iconos en todas partes de tu sitio web.

Lo primero que tienes que hacer es instalar y activar el plugin Font Awesome para WordPress. Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarse, el plugin habilita el soporte Font Awesome para su tema. Ahora puedes editar cualquier publicación o página de WordPress y usar un icono abreviado como este:

[icon name="rocket"]

Puedes usar este atajo junto con otro texto o por sí mismo en un bloque de atajo dedicado.

Una vez añadido, puedes ver una vista previa de tu publicación o página para ver cómo se verá el icono en un sitio en vivo. Así es como se veía en nuestro sitio de prueba.

También puedes añadir el icono de fuente dentro de un bloque de párrafo por sí mismo, donde puedes usar la configuración del bloque para aumentar el tamaño del icono.

A medida que aumente el tamaño del texto, esto puede parecer extraño dentro del editor de texto. Eso se debe a que el atajo no se convierte automáticamente en una fuente de icono dentro del editor de bloques.

Tendrás que hacer clic en el botón de vista previa de tu publicación o página para ver cómo se vería el tamaño real del icono.

También puedes usar el icono de atajo dentro de las columnas y crear cuadros de características como este:

2. Usar fuentes de iconos con un constructor de páginas de WordPress

Los plugins de construcción de páginas de WordPress más populares vienen con soporte incorporado para fuentes de iconos. Esto te permite usar fácilmente fuentes de iconos en tus páginas de destino así como en otras áreas de tu sitio web.

Beaver Builder

Beaver Builder es el mejor plugin de construcción de páginas de WordPress del mercado. Te permite crear fácilmente diseños de página personalizados en WordPress sin escribir ningún código.

Beaver Builder viene con hermosos iconos y módulos listos para usar que puedes arrastrar y soltar en tu correo y páginas.

Puedes crear grupos de íconos, agregar un solo ícono y moverlos a filas y columnas bien posicionadas. También puedes seleccionar tus propios colores, fondo, espaciado y margen sin escribir CSS.

Incluso puedes crear temas de WordPress completamente personalizados sin escribir ningún código usando el producto Beaver Builder$0027s Themer.

Elementor Pro

Elementor es otro plugin popular para construir páginas de WordPress. También viene con varios elementos que permiten usar fuentes de iconos, incluyendo un elemento Icono.

Puedes arrastrar y soltar un icono en cualquier lugar y usarlo con filas, columnas y tablas para crear hermosas páginas.

Otros constructores de páginas populares como Divi y Visual Composer también son totalmente compatibles con las fuentes de los iconos.

3. Añadir fuentes de iconos en WordPress manualmente con código

Como mencionamos anteriormente, las fuentes de los iconos son sólo fuentes y pueden añadirse a tu sitio como si se tratara de fuentes personalizadas.

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

También puedes subir todo el directorio de fuentes a una carpeta en tu tema de WordPress y luego usar esas fuentes en tu hoja de estilo.

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

Método 1:

Este método manual es bastante fácil.

Primero, tienes que visitar la página web de Font Awesome e introducir tu dirección de correo electrónico para obtener el código de incrustación.

Ahora revisa tu bandeja de entrada para un correo electrónico de Font Awesome con tu código de incrustación. Copia y pega este código de incrustación en el archivo header.php de tu tema de WordPress justo antes de la etiqueta.

Tu código de incrustación será una sola línea que traerá la biblioteca Font Awesome directamente de sus servidores CDN. Se verá algo como esto:

1

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

Un mejor enfoque sería cargar correctamente el JavaScript en WordPress usando el mecanismo de cola incorporado.

En lugar de enlazar con la hoja de estilo de la plantilla de encabezado de tu tema, puedes añadir el siguiente código en el archivo functions.php de tu tema o en un plugin específico del sitio.

1234567functionwpb_load_fa() { wp_enqueue_script( $0027wpb-fa$0027, $0027https://use.fontawesome.com/123456abc.js$0027, array(), $00271.0.0$0027, true ); } add_action( $0027wp_enqueue_scripts$0027, $0027wpb_load_fa$0027);

Método 2:

El segundo método no es el más fácil, pero te permitiría alojar las fuentes de los iconos de Font Awesome en tu propio sitio web.

Primero, tienes que visitar la página web Font Awesome para descargar el paquete de fuentes a tu ordenador.

Simplemente descarga las fuentes de los iconos y descomprime el paquete.

Ahora, necesitarás conectarte a tu alojamiento de WordPress usando un cliente FTP e ir al directorio de tu tema de WordPress.

Necesitas crear una nueva carpeta allí y darle un nombre a las fuentes. A continuación, debes subir el contenido de la carpeta de fuentes de iconos al directorio de fuentes de tu servidor de alojamiento web.

Ahora estás listo para cargar fuentes de iconos en tu tema de WordPress. Simplemente añade este código al archivo functions.php de tu tema o en un plugin específico del sitio.

1234567functionwpb_load_fa() { wp_enqueue_style( $0027wpb-fa$0027, get_stylesheet_directory_uri() . $0027/fonts/css/font-awesome.min.css$0027); } add_action( $0027wp_enqueue_scripts$0027, $0027wpb_load_fa$0027);

Has cargado con éxito "Font Awesome" en tu tema de WordPress.

Ahora viene la parte en la que añadirás iconos reales en tu tema, publicaciones o páginas de WordPress.

Mostrando manualmente fuentes de iconos en WordPress

Ve al sitio web de Font Awesome para ver la lista completa de iconos disponibles. Haz clic en cualquier icono que quieras usar y podrás ver el nombre del icono.

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

1

Puedes darle estilo a este icono en la hoja de estilo de tu tema de la siguiente manera:

1234.fa-arrow-alt-circle-up { font-size:50px; color:#FF6600; }

También puedes combinar diferentes iconos juntos y estilizarlos a la vez. Por ejemplo, supongamos que quieres mostrar una lista de enlaces con iconos junto a ellos. Puedes envolverlos bajo un elemento con una clase específica.

123456 Home Biblioteca Aplicaciones Settingsdiv>

Ahora puedes darles estilo en la hoja de estilo de tu tema así:

1234567.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 a añadir fácilmente fuentes de iconos en tu tema de WordPress. También puedes echar un vistazo a nuestro tutorial sobre cómo añadir iconos de imágenes con menús de navegación en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver los video tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir