¿Quiere agregar fuentes de íconos a su sitio de WordPress?
Las fuentes de los iconos son redimensionables y se cargan igual que las fuentes web, por lo que no ralentizarán su sitio web. Incluso puedes diseñarlos usando CSS para obtener exactamente el aspecto que deseas.
En este artículo, le mostraremos cómo agregar fácilmente fuentes de íconos a su tema de WordPress.

¿Qué son las fuentes de iconos y por qué deberías usarlas?
Las fuentes de iconos contienen símbolos o imágenes pequeñas en lugar de letras y números.

Puedes utilizar estas fuentes de iconos de muchas maneras diferentes. Por ejemplo, puede usarlos con su carrito, botones de descarga, cuadros de funciones, sorteos e incluso en los menús de navegación de WordPress.
De hecho, WordPress utiliza íconos de fuentes en su área de administración.

La mayoría de los visitantes comprenderán inmediatamente lo que significa un ícono de uso común, por lo que podrán facilitarles la navegación por su sitio. También pueden ayudarle a crear un sitio web multilingüe, ya que la mayoría de las personas entenderán los caracteres de los iconos comunes sin importar el idioma que hablen.
En comparación con los íconos basados en imágenes, los íconos de fuentes se cargan mucho más rápido, por lo que puedes aumentar la velocidad y el rendimiento de WordPress.
Hay varios conjuntos de fuentes de íconos de código abierto que puedes usar de forma gratuita, pero los usaremos en esta guía. Personaje fantástico ya que es el conjunto de iconos de código abierto más popular.
Dicho esto, echemos un vistazo a cómo puedes agregar fácilmente fuentes de íconos a tu tema de WordPress. Simplemente utilice los enlaces rápidos para ir directamente al método que desea utilizar.
Método 1. Agregar fuentes de iconos usando un complemento de WordPress (fácil)
La forma más sencilla de agregar fuentes de íconos a WordPress es usar Personaje fantástico. Este complemento le permite usar fuentes de íconos en sus páginas y publicaciones sin modificar sus archivos de tema de WordPress. También recibirás automáticamente nuevos íconos de Font Awesome cada vez que actualices el complemento.
Lo primero que debes hacer es instalar y activar el complemento Font Awesome. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez activado, puedes agregar un ícono de Font Awesome a cualquier bloque de shortcode. Simplemente abra la página o publicación donde desea mostrar la fuente del ícono y luego haga clic en el ícono «+».
Ahora puedes buscar «Código corto» y seleccionar el bloque correcto cuando aparezca.

Una vez hecho esto, puedes agregar cualquier ícono de Font Awesome usando el siguiente código corto:
Simplemente reemplace «cohete» con el nombre del ícono que desea mostrar. Para obtener el nombre, vaya al sitio Font Awesome y haga clic en el icono que desea utilizar.

En la ventana emergente que aparece, continúa y haz clic en el nombre del icono.
Font Awesome ahora copiará automáticamente el nombre al portapapeles.

Una vez hecho esto, simplemente pegue el nombre en el código corto. Ahora puede hacer clic en «Publicar» o «Actualizar» para activar la fuente del icono.
A veces es posible que desees mostrar una fuente de icono dentro de un bloque de texto. Por ejemplo, es posible que necesites mostrar el símbolo de «derechos de autor» después del nombre de una marca.
Para hacer esto, simplemente pegue el código corto dentro de cualquier bloque de Párrafo.

Luego puede usar la configuración en el menú de la derecha para personalizar el ícono, de manera similar a cómo personaliza las opciones para los bloques de texto. Por ejemplo, puedes cambiar el tamaño de fuente y el color de fondo en WordPress.
WordPress convertirá el shortcode en un ícono de Font Awesome y lo mostrará junto a su texto.

Otra opción es agregar el código corto a cualquier área lista para widgets.
Por ejemplo, puede agregar un bloque de código corto a la barra lateral de su sitio o a una sección similar.

Para obtener más información, consulte nuestra guía sobre cómo usar códigos cortos en los widgets de la barra lateral de WordPress.
También puede agregar códigos cortos de íconos a las columnas y crear hermosos cuadros de características.

Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar cuadros de funciones con íconos en WordPress.
Muchos sitios web utilizan fuentes de iconos en sus menús para ayudar a los visitantes a orientarse. Para agregar un ícono, cree un nuevo menú o abra un menú existente en su panel de WordPress.
Para obtener instrucciones detalladas, consulte nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.
Sobre el yo espero » Menú página, haga clic en «Opciones de pantalla» y luego marque la casilla junto a «Clases CSS».

Una vez hecho esto, simplemente haga clic para expandir el elemento del menú donde desea que se muestre el ícono.
Ahora deberías ver un nuevo campo «Clases CSS».

Para obtener la clase CSS de un ícono, simplemente busque la fuente del ícono en el sitio web de Font Awesome y haga clic en ella. Si lo deseas, puedes cambiar el estilo del icono haciendo clic en las diferentes configuraciones.
En la ventana emergente verá un fragmento de código HTML. La clase CSS es simplemente el texto entre comillas. Por ejemplo, en la siguiente imagen, la clase CSS es fa-solid fa-address-book.

Simplemente copie el texto entre comillas y luego regrese a su panel de WordPress.
Ahora puedes pegar el texto en el campo «Clases CSS».

Para agregar más fuentes de íconos, simplemente siga el mismo proceso que el anterior.
Cuando esté satisfecho con la configuración de su menú, haga clic en «Guardar». Ahora, si visita su sitio web de WordPress, verá el menú de navegación actualizado.

Método 2. Usar fuentes de iconos con SeedProd (más personalizable)
Si desea tener la libertad de utilizar iconos de fuentes en cualquier lugar de su sitio, le recomendamos utilizar un complemento de creación de páginas.
SemillaProd es el mejor creador de páginas de WordPress del tipo arrastrar y soltar del mercado y tiene más de 1400 íconos Font Awesome integrados. También tiene un bloque de íconos listo para usar que puede agregar a cualquier página arrastrando y soltando.
Con SeedProd, es fácil crear páginas personalizadas en WordPress y luego mostrar íconos de Font Awesome en cualquier lugar de esas páginas.
Lo primero que debes hacer es instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.
Nota: Hay una versión gratuita de SeedProdpero usaremos la versión Pro ya que viene con el bloque de iconos.
Después de la activación, vaya a SeedProd » Configuración e ingrese la clave de licencia.

Puedes encontrar esta información a continuación. su cuenta en el sitio web de SeedProd. Después de ingresar su clave de licencia, continúe y haga clic en el botón «Verificar clave».
A continuación tienes que visitar SeedProd » Páginas y haga clic en el botón «Agregar nueva página de destino».

Ahora puede elegir una plantilla para usar como base para su página. SeedProd tiene más de 300 plantillas diseñadas profesionalmente que puede personalizar para satisfacer las necesidades de su blog o sitio web de WordPress.
Para seleccionar una plantilla, coloque el cursor sobre ella y haga clic en el icono «Verificar».

Usamos la plantilla «Página de ventas de libros electrónicos» en todas nuestras imágenes, ya que es perfecta para vender productos digitales. Sin embargo, puedes utilizar cualquier diseño que desees.
Entonces, continúa y escribe un nombre para tu página personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiar esta URL a lo que quieras.
Cuando esté satisfecho con la información que ingresó, haga clic en el botón «Guardar y comenzar a editar la página».

A continuación, accederá al generador de páginas de arrastrar y soltar de SeedProd, donde podrá personalizar la plantilla.
El editor de SeedProd muestra una vista previa en vivo de su proyecto a la derecha y algunas configuraciones de bloque a la izquierda.

El menú de la izquierda también tiene bloques que puedes arrastrar a tu proyecto.
Puede arrastrar y soltar bloques estándar como botones e imágenes o usar bloques avanzados como formulario de contacto, temporizador de cuenta regresiva, botones para compartir en redes sociales y más.

Para personalizar cualquier bloque, simplemente haga clic para seleccionarlo en el diseño.
El menú de la izquierda ahora mostrará todas las configuraciones que puede usar para personalizar ese bloque. Por ejemplo, a menudo puedes cambiar los colores de fondo, agregar imágenes de fondo o cambiar la combinación de colores y las fuentes para que se adapten mejor a tu marca.

Para agregar una fuente de icono a su página, simplemente busque el bloque «Icono» en la columna de la izquierda y arrástrelo a su diseño.
SeedProd mostrará un icono de «flecha» de forma predeterminada.

Para mostrar un ícono de Font Awesome diferente, simplemente haga clic para seleccionar el bloque de íconos.
En el menú de la izquierda, coloque el cursor sobre el ícono y luego haga clic en el botón «Biblioteca de íconos» cuando aparezca.

Ahora verás todos los diferentes íconos de Font Awesome entre los que puedes elegir.
Simplemente busque el ícono de la fuente que desea usar y haga clic en él.


SeedProd ahora agregará el ícono a su diseño.
Una vez que haya elegido un ícono, puede cambiar su alineación, color y tamaño usando la configuración en el menú de la izquierda.

También puedes agregar un enlace al ícono de fuente escribiéndolo en el campo «Enlace» en el menú de la izquierda.
Otra opción es utilizar el Icon Box ya preparado de SeedProd.
Esto le permite escribir texto y luego mostrar un ícono de personaje al lado, lo que lo convierte en una excelente opción para cuadros de funciones.

Simplemente busque Icon Box en el menú de la izquierda y arrástrelo a su diseño.
Luego puede hacer clic para seleccionar el bloque y cambiar el ícono siguiendo el mismo procedimiento anterior.

A continuación, puede escribir el título y el texto del cuerpo.
También puede cambiar el espaciado de los bloques, el color del texto, agregar animaciones CSS y más seleccionando la pestaña «Avanzado».

Puedes continuar trabajando en la página agregando más bloques y personalizándolos en el menú de la izquierda.
Cuando esté satisfecho con el aspecto de la página, haga clic en el botón «Guardar». Luego puede seleccionar «Publicar» para activar la página.

Esperamos que este artículo te haya ayudado a aprender cómo agregar fuentes de íconos a tu tema de WordPress. También puede consultar nuestra guía sobre los mejores complementos de ventanas emergentes comparados y cómo elegir el mejor software de diseño web.