Aquí se explica cómo agregar fácilmente fuentes de iconos a su tema de WordPress

¿Quiere agregar fuentes de iconos a su sitio de WordPress?

Las fuentes de íconos le permiten agregar íconos vectoriales redimensionables que se cargan como fuentes web para que no ralenticen su sitio. Incluso puede diseñarlos con CSS para obtener el aspecto exacto que desea.

En este artículo, le mostraremos cómo agregar fácilmente fuentes de iconos a su tema de WordPress.

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

Las fuentes de iconos contienen símbolos o imágenes pequeñas en lugar de letras y números.

Puede utilizar estas fuentes de iconos para mostrar imágenes comunes. Por ejemplo, puede usarlos con su carrito de compras, botones de descarga, cuadros de funciones, concursos de obsequios e incluso en los menús de navegación de WordPress.

La mayoría de los visitantes sabrán de inmediato qué significa un símbolo de uso común. De esta manera, puede ayudar a los visitantes a navegar por su sitio web e interactuar con su contenido.

Estas imágenes también pueden ayudarlo a crear un sitio web multilingüe de WordPress, ya que la mayoría de las personas pueden entender las fuentes de los íconos 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 pueden aumentar la velocidad y el rendimiento de WordPress.

Hay varios conjuntos de fuentes de iconos de código abierto que puede usar de forma gratuita, p. IcoMond, Drogas genericasY Iconos lineales.

De hecho, el software de WordPress viene con íconos gratuitos de Dashicon. Estos son los iconos que puedes ver en el administrador de WordPress.

En esta guía usamos fuente genial ya que es el conjunto de iconos de código abierto más popular. Lo usamos en AprenderWP y en todos nuestros complementos premium de WordPress.

Veamos cómo puede agregar fácilmente fuentes de iconos a su tema de WordPress. Simplemente use los enlaces rápidos para ir directamente al método que desea usar.

Método 1. Agregar fuentes de íconos usando un complemento de WordPress (Fácil)

La forma más fácil de agregar fuentes de iconos a WordPress es usar fuente genial enchufar. Esto le permite usar fuentes de iconos en sus páginas y publicaciones sin modificar sus archivos de tema. Además, cada vez que actualice el complemento, obtendrá automáticamente todos los nuevos íconos de Font Awesome.

Lo primero que debe hacer es instalar y activar el complemento Font Awesome. Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

Una vez habilitado, puede agregar un ícono de Font Awesome a cualquier bloque de shortcode. Simplemente abra la página o publicación donde desea que aparezca la fuente del icono, luego haga clic en el icono "+".

Ahora puede buscar un "código abreviado" y seleccionar el bloque correcto cuando aparezca.

Luego puede agregar cualquier ícono de Font Awesome usando el siguiente código abreviado:

Simplemente reemplace "misil" con el nombre del ícono que desea mostrar. Para obtener este nombre, vaya al sitio de Font Awesome y haga clic en el icono que desea usar.

En la ventana emergente que aparece, haga clic en el nombre del icono.

Font Awesome ahora copiará automáticamente el nombre a su portapapeles.

Luego simplemente pegue el nombre en el código abreviado. Ahora puede hacer clic en publicar o actualizar para activar la fuente de caracteres.

En ocasiones, es posible que desee mostrar una fuente de carácter en un bloque de texto. Por ejemplo, es posible que deba mostrar un símbolo de "derechos de autor" después del nombre de una marca.

Para hacer esto, simplemente coloque el código abreviado en cada bloque de párrafo.

A continuación, puede utilizar la configuración del menú de la derecha para personalizar el icono, de forma similar a las opciones de personalización de los bloques de texto. Por ejemplo, puede cambiar el tamaño de fuente.

WordPress convierte el shortcode en un ícono de Font Awesome para los visitantes y lo muestra junto a su texto.

Otra opción es agregar el código abreviado a cualquier área lista para widgets.

Por ejemplo, puede agregar un bloque de shortcode a la barra lateral o una sección similar de su sitio web.

Para obtener más información, consulte nuestra guía sobre el uso de códigos abreviados en los widgets de la barra lateral de WordPress.

Incluso puede agregar un código abreviado de icono a las columnas y crear hermosos campos de características.

Para obtener instrucciones detalladas, consulte nuestra guía para agregar cuadros de iconos funcionales en WordPress.

Muchos sitios web utilizan fuentes de iconos en sus menús para ayudar a los visitantes a navegar. Para agregar un ícono, cree un nuevo menú o abra un menú existente en su tablero de WordPress.

Para obtener instrucciones paso a paso, consulte nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.

Luego haga clic en "Opciones de pantalla" y marque la casilla junto a "Clases CSS".

Cuando haya terminado con eso, simplemente haga clic para expandir el elemento del menú donde desea que aparezca el icono.

Ahora debería ver un nuevo campo Clases CSS.

Para obtener la clase CSS de un ícono, solo busque la fuente del ícono en el sitio web de Font Awesome y haga clic en él. Si lo desea, puede 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 dentro de las comillas y luego vuelva a su panel de control de WordPress.

Ahora puede poner el texto en el campo Clases de CSS.

Para agregar más fuentes de iconos, simplemente siga el procedimiento anterior.

Cuando esté satisfecho con la configuración del menú, haga clic en Guardar. Ahora, cuando visite su sitio de WordPress, verá el menú de navegación actualizado.

Método 2. Uso de fuentes de caracteres con SeedProd (más receptivo)

Si desea más libertad al usar símbolos de fuentes, le recomendamos que use un complemento de creación de páginas.

SeedProd es el mejor generador de páginas de WordPress de arrastrar y soltar y viene con más de 1400 íconos Font Awesome incorporados. También tiene un cuadro de iconos prediseñado que puede arrastrar y soltar para agregar a cualquier página.

SeedProd facilita la creación de páginas personalizadas de WordPress y luego muestra iconos de Font Awesome en todas partes en esas páginas.

Primero debe instalar y activar el complemento. Consulte nuestra guía para principiantes sobre cómo instalar un complemento de WordPress para obtener más detalles.

Nota: Hay versión gratuita de SeedProdpero usaremos la versión pro ya que viene con la caja iconos

Después de la activación, vaya a SeedProd » Ajustes e ingrese su clave de licencia.

Esta información se puede encontrar a continuación su cuenta en el sitio web de SeedProd. Después de ingresar la clave de licencia, continúe y haga clic en el botón "Verificar clave".

Entonces debes 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 180 plantillas diseñadas profesionalmente que puede personalizar para satisfacer las necesidades de su blog o sitio web de WordPress.

Para seleccionar una plantilla, pase el cursor sobre ella y luego haga clic en el icono de marca de verificación.

Usamos la plantilla de página de ventas de libros electrónicos en todas nuestras imágenes, pero puede usar cualquier diseño que desee.

Luego ingrese un nombre para la página personalizada. SeedProd crea automáticamente una URL basada en el título de la página, pero puede cambiar esta URL a lo que desee.

Si está satisfecho con la información ingresada, 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 diseño 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 diseño.

Puede arrastrar y soltar bloques estándar como botones e imágenes, o usar bloques avanzados como el formulario de contacto, la cuenta regresiva, los botones para compartir en redes sociales y más.

Para personalizar cada bloque, simplemente haga clic para seleccionarlo en su diseño.

El menú de la izquierda ahora muestra todas las configuraciones que puede usar para personalizar este bloque. Por ejemplo, puede cambiar con frecuencia los colores de fondo, agregar imágenes de fondo o cambiar la combinación de colores y las fuentes para que coincidan mejor con su marca.

Para agregar una fuente de ícono a la página, simplemente busque el bloque de ícono en la columna izquierda y luego arrástrelo a su diseño.

SeedProd muestra un icono de "flecha" de forma predeterminada.

Para mostrar un ícono de Font Awesome diferente, simplemente haga clic en el bloque de íconos para seleccionarlo.

En el menú de la izquierda, desplace el cursor sobre el ícono y luego haga clic en el botón Biblioteca de íconos cuando aparezca.

Ahora verá todos los diferentes íconos de Font Awesome para 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.

Después de seleccionar un icono, puede cambiar su alineación, color y tamaño, usando la configuración en el menú de la izquierda.

Puede continuar trabajando lado a lado agregando más bloques y ajustando esos bloques 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 hacer que esta página esté activa.

Esperamos que este artículo le haya ayudado a aprender cómo agregar fuentes de iconos a su tema de WordPress. También puede consultar nuestra guía para comparar los mejores complementos emergentes y cómo elegir el mejor software de diseño web.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es Y Facebook.