Cómo hacer un Sitio Web o Blog en 2024 - Guía fácil y Gratuita para Crear un Sitio Web

Cómo agregar fácilmente fuentes de iconos a su tema de WordPress

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

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.

Fuentes de iconos geniales

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.

Íconos de fuentes en su panel de WordPress

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.

🔥 Leer:  Cómo agregar botones de reacción de WordPress para aumentar la participación
Agregar un ícono de fuente a WordPress usando un código corto

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.

Elegir una fuente de ícono para su sitio web de WordPress

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.

Obtener el nombre del icono de una fuente

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.

Agregar una fuente de ícono en WordPress usando un código corto

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.

Un ejemplo de fuente de icono en WordPress

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.

Agregar una fuente de ícono a un área lista para widgets en WordPress

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.

Un ejemplo de un cuadro de funciones en un sitio web de WordPress

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

Agregar clases de CSS a un menú de navegación de WordPress

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

Agregar una fuente de icono usando una clase 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.

🔥 Leer:  Una semana con WOM
Obtener el código para una fuente de icono

Simplemente copie el texto entre comillas y luego regrese a su panel de WordPress.

Ahora puedes pegar el texto en el campo «Clases CSS».

Agregar fuentes de íconos en WordPress usando una clase 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.

Un ejemplo de fuentes de iconos en un menú de navegación de WordPress

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.

Ingresando su clave de licencia de SeedProd

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

Elija un diseño personalizado para su página de WordPress

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

Elija una plantilla diseñada profesionalmente

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

Agregar un título a un diseño de página de SeedProd

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.

🔥 Leer:  Cómo vender un solo producto online con WordPress (3 formas)
Personalización de una plantilla de página de WordPress de SeedProd

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.

Agregar bloques a una página o diseño de publicación en WordPress

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.

Crear un diseño personalizado para un sitio web de WordPress

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.

Agregar una fuente de icono en WordPress usando SeedProd

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.

Elegir un icono de fuente usando un creador de páginas

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.

Biblioteca de fuentes de iconos incorporada de SeedProdBiblioteca de fuentes de iconos incorporada de SeedProd

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.

Cómo personalizar un ícono de fuente usando SeedProd

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.

Agregar íconos de personajes a una plantilla de SeedProd

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.

Agregar un bloque de íconos al diseño de una página de inicio de SeedProd

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

Personalizar un bloque de iconos de WordPress usando SeedProd

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.

Publicar un diseño de página personalizado con un icono de fuente

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.