Cómo usar fuentes de íconos en el editor de publicaciones de WordPress (sin código)

¿Quieres usar fuentes de iconos en el editor de publicaciones de WordPress?

Las fuentes de iconos facilitan el uso de imágenes y símbolos en el texto. Son livianos y no ralentizarán su sitio y se pueden escalar fácilmente a cualquier tamaño y diseñar como cualquier otra fuente de texto.

En este artículo, le mostraremos cómo usar fácilmente fuentes de íconos en el editor de publicaciones de WordPress sin escribir código HTML.

Le mostraremos varios métodos, cada uno con un enfoque ligeramente diferente al otro. Puedes elegir el que funcione mejor para ti.

Método 1: agregar fuentes de íconos al editor de publicaciones de WordPress con íconos de texto enriquecido JVM

Este método se recomienda para cualquier tipo de sitio web de WordPress. Es fácil de usar y funciona a la perfección con el editor de bloques.

Primero necesitas instalarlo y activarlo. Símbolos de texto enriquecido de JVM enchufar. Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

Una vez habilitado, puede editar fácilmente una publicación o página de WordPress o crear una nueva. Agregue un nuevo bloque de párrafo en el editor de publicaciones y verá un nuevo ícono de bandera en la barra de herramientas del bloque.

Al hacer clic en él, aparecerá una ventana emergente con iconos para elegir. Por defecto, las fuentes populares de iconos Font Awesome.

Puede usar la búsqueda para buscar un ícono, o simplemente desplazarse hacia abajo para encontrar el ícono que desea y luego hacer clic para agregarlo.

Una ventaja de usar fuentes de iconos es que puedes usar CSS para darles estilo.

Sin embargo, dado que ya está usando el editor de bloques, puede usar las herramientas de coloreo integradas para diseñar los símbolos.

El complemento le permite usar fuentes de caracteres en la mayoría de los bloques de texto como párrafo, lista, botón, columnas, portada, etc.

Este es un ejemplo del uso de fuentes de iconos y opciones de bloque para diseñar tres columnas.

Otro ejemplo útil del uso de fuentes de iconos son los botones.

Esta vez usaremos fuentes de iconos en línea para los dos botones, junto con algo de texto.

Siéntase libre de usar las herramientas del editor de bloques como la alineación del texto, los colores, el espaciado y más para aprovechar al máximo las fuentes de sus iconos.

Método 2. Agregue fuentes de íconos al editor de publicaciones de WordPress con Font Awesome

En este método, debe agregar códigos cortos en el editor de publicaciones para mostrar las fuentes de los iconos. Puede usar este método si no necesita usar fuentes de íconos regularmente en sus publicaciones y páginas de WordPress.

Primero necesitas instalarlo y activarlo. fuente genial enchufar. Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

Una vez habilitado, puede editar una publicación o página de WordPress y usar el código abreviado a continuación para agregar un ícono de fuente.

El parámetro de nombre aquí es el nombre de la fuente utilizada por Font Awesome. La lista completa se puede encontrar en Hoja de trucos de Font Awesome página de libro.

Una vez agregado, puede obtener una vista previa de su publicación o página para ver cómo se verá el ícono en el sitio en vivo, ya que no aparecerá como un ícono en el editor de bloques.

Así es como se veía en nuestra página de prueba.

Puede colocar el shortcode en un párrafo y otro texto. También puede agregarlo usted mismo con el bloque Shortcode.

Sin embargo, usar el bloque Shortcode no le brinda las opciones de estilo que obtiene con otros bloques de texto.

También puede colocar el código abreviado en columnas para crear una fila de funciones.

Sería un poco más complicado ya que no puede ver las imágenes reales y las alturas de las columnas en el editor siguen cambiando.

Así es como se veía en nuestro sitio web de prueba. Las columnas tienen la misma altura aunque no estén en el editor.

Probablemente necesitará obtener una vista previa de su trabajo muchas veces en una nueva pestaña del navegador para ver cómo se verá para los usuarios.

Método 3. Uso de fuentes de iconos con los creadores de páginas de WordPress

Este método es excelente si está creando una página de destino o construyendo su sitio usando un creador de páginas de WordPress como WordPress Producto de semilla.

SeedProd es el mejor creador de páginas de WordPress. Con él, puede crear fácilmente hermosas páginas de destino o diseñar todo su sitio we

Primero necesitas instalarlo y activarlo. Producto de semilla enchufar. Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

Tras la activación, se le pedirá que ingrese la clave de licencia de su complemento. Puede encontrar esta información en su cuenta en el sitio web de SeedProd.

Una vez que haya ingresado su clave de licencia y haya hecho clic en "Verificar clave", estará listo para comenzar a trabajar en su página de destino.

Solo ve a SeedProd » Páginas de aterrizaje Página y haga clic en el botón Agregar nueva página de destino.

A continuación, se le pedirá que seleccione una plantilla para su página de destino.

SeedProd viene con un conjunto de hermosos diseños que puede usar como punto de partida, o puede comenzar con una plantilla en blanco y diseñar todo usted mismo.

Para este tutorial usaremos una plantilla prefabricada. Simplemente haga clic en una plantilla para seleccionarla y continuar.

Luego se le pedirá que proporcione un título para su página de destino y una URL para elegir.

Una vez que haya ingresado, haga clic en el botón "Guardar y comenzar a editar la página" para continuar.

SeedProd ahora lanzará la interfaz de Page Builder. Es una herramienta de diseño de arrastrar y soltar en la que simplemente puede señalar y hacer clic en cualquier elemento para editarlo.

También puede arrastrar y soltar bloques desde la columna izquierda para agregar nuevos elementos a su diseño.

Para este tutorial agregaremos el bloque de íconos.

Después de agregar el bloque, simplemente puede hacer clic para editar sus propiedades.

La columna de la izquierda cambia para mostrar las opciones de bloqueo de iconos. Puede hacer clic en la sección Icono a la izquierda y elegir una imagen de icono diferente o cambiar el color y el estilo.

Otra forma de usar íconos en SeedProd es agregar el bloque Icon Box.

La diferencia entre este y el bloque de iconos anterior es que el cuadro de iconos le permite agregar texto junto con el icono de su elección.

Esta es una de las formas más comunes de usar íconos cuando se muestran características de productos, servicios y otros elementos.

Puede colocar su cuadro de iconos en columnas, elegir colores y ajustar el tamaño del icono a su gusto.

Usted también puede para formatear el texto que lo acompaña usando la barra de herramientas de formato de SeedProd.

Cuando haya terminado de editar su página, no olvide hacer clic en el botón "Guardar" en la esquina superior derecha de la pantalla.

Cuando haya terminado, puede hacer clic en Publicar para que la página esté activa, o puede hacer clic en Vista previa para asegurarse de que se vea como desea.

También puede hacer clic en "Guardar como plantilla" para poder reutilizar este tema en otras partes de su sitio web con SeedProd.

Así es como se veían las fuentes de los íconos en nuestro sitio web de prueba.

Esperamos que este artículo le haya ayudado a aprender a usar fuentes de iconos en el editor de publicaciones de WordPress sin escribir código HTML. También puede consultar nuestra Guía de rendimiento de WordPress para optimizar la velocidad de su sitio o los mejores complementos de página de destino para WordPress.

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.