Las fuentes de iconos son una excelente manera de agregar imágenes y símbolos a su sitio web. En este artículo, se presentan tres métodos para usar fuentes de íconos en el editor de publicaciones de WordPress sin escribir código HTML.
El primer método consiste en usar el plugin «Iconos de texto enriquecido de JVM». Después de instalar y activar este plugin, se puede agregar un nuevo bloque de párrafo y aparecerá un nuevo icono de bandera en la barra de herramientas del bloque. Al hacer clic en él, aparecerá una ventana emergente de iconos para elegir. 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.
El segundo método requiere agregar códigos de abreviatura en el editor de publicaciones para mostrar las fuentes de íconos. Para ello, se debe instalar y activar el plugin «Fuente impresionante». Se puede usar un shortcode para agregar un ícono de fuente. El parámetro de nombre es el nombre de la fuente utilizada por Font Awesome.
El tercer método consiste en usar los creadores de páginas de WordPress como SeedProd. Después de instalar y activar este plugin, se puede agregar el bloque de icono. Después de agregar el bloque, simplemente se puede hacer clic para editar sus propiedades. La columna de la izquierda cambiará para mostrar las opciones para el bloque de iconos. También se puede agregar el bloque ‘Cuadro de iconos’ para agregar texto junto con el icono elegido.
En conclusión, mediante el uso de cualquiera de estos métodos, se pueden agregar fácilmente fuentes de íconos al editor de publicaciones de WordPress sin necesidad de escribir ningún código HTML.
¿Quieres usar fuentes de iconos en el editor de publicaciones de WordPress?
Las fuentes de iconos le permiten usar fácilmente 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 ningún código HTML.
Le mostraremos varios métodos, cada uno con un enfoque ligeramente diferente al otro. Puedes elegir uno que funcione mejor para ti.
Método 1. Agregar fuentes de íconos en el editor de publicaciones de WordPress usando íconos de texto enriquecido JVM
Se recomienda usar este método en cualquier tipo de sitio web de WordPress. Es fácil de usar y funciona a la perfección con el editor de bloques.
En primer lugar, debe instalar y activar el Iconos de texto enriquecido de JVM plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress plugin.
Tras la activación, puede simplemente editar una publicación o página de WordPress o crear una nueva. Dentro del editor de publicaciones, agregue un nuevo bloque de párrafo y verá un nuevo icono de bandera en la barra de herramientas del bloque.
Al hacer clic en él, aparecerá una ventana emergente de iconos para elegir. Utiliza las populares fuentes de iconos Font Awesome de forma predeterminada.
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á utilizando el editor de bloques, simplemente puede usar las herramientas de color integradas para diseñar los íconos.
El plugin le permite usar fuentes de íconos en la mayoría de los bloques de texto, como Párrafo, Lista, Botón, Columnas, Portada y más.
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 es con botones.
Esta vez estamos usando fuentes de iconos en línea junto con texto para los dos botones.
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 los iconos.
Método 2. Agregar fuentes de íconos en el editor de publicaciones de WordPress con Font Awesome
Este método requiere que agregue 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.
En primer lugar, debe instalar y activar el fuente impresionante plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress plugin.
Tras la activación, puede editar una publicación o página en WordPress y usar lo siguiente shortcode para agregar un icono de fuente.
[icon name="home"]
El parámetro de nombre aquí es el nombre de la fuente utilizada por Font Awesome. Puede encontrar la lista completa en el Hoja de trucos de Font Awesome página.
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 se mostrará como un ícono en el editor de bloques.
Así es como se veía en nuestro sitio de prueba.
Puedes usar el shortcode dentro de un párrafo y en línea con otro texto. También puede agregarlo solo usando el bloque ‘Shortcode’.
Sin embargo, usar el bloque ‘Shortcode’ no le dará las opciones de estilo que obtendrá con otros bloques de texto.
También puede agregar el shortcode dentro de las columnas para crear una fila de características.
Sería un poco más complicado ya que no podrá ver las imágenes reales y las alturas de las columnas seguirán cambiando dentro del editor.
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 tendrá que obtener una vista previa de su trabajo en una nueva pestaña del navegador muchas veces 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 diseñando su sitio web utilizando un creador de páginas de WordPress como Producto de semilla.
SeedProd es el mejor creador de páginas de WordPress del mercado. Le permite crear fácilmente hermosas páginas de destino o diseñar su sitio web completo.
En primer lugar, debe instalar y activar el Producto de semilla plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress plugin.
Tras la activación, se le pedirá que introduzca su plugin clave de licencia. Puede encontrar esta información en su cuenta en el sitio web de SeedProd.
Después de ingresar su clave de licencia y hacer clic en ‘Verificar clave’, puede comenzar a trabajar en su página de destino.
Simplemente ve a la SeedProd » Páginas de aterrizaje y haga clic en el botón ‘Agregar nueva página de destino’.
Después de eso, se le pedirá que elija una plantilla para su página de destino.
SeedProd viene con un montón 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 prediseñada. Simplemente haga clic en una plantilla para seleccionarla y continuar.
A continuación, se le pedirá que proporcione un título para su página de destino y elija una URL.
Después de ingresarlos, haga clic en el botón ‘Guardar y comenzar a editar la página’ para continuar.
SeedProd ahora lanzará la interfaz del creador de páginas. 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.
Por el bien de este tutorial, vamos a agregar el bloque Icon.
Después de agregar el bloque, simplemente puede hacer clic para editar sus propiedades.
La columna de la izquierda cambiará para mostrar las opciones para el bloque 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 agregando el bloque ‘Icon Box’.
La diferencia entre este y el bloque ‘Icono’ que usamos anteriormente es que el ‘Cuadro de iconos’ le permite agregar texto junto con el icono elegido.
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 el cuadro de su icono dentro de las columnas, elegir colores y ajustar el tamaño del icono a su gusto.
Además, también puede dar formato al texto que lo acompaña utilizando la barra de herramientas de formato de SeedProd.
Una vez que haya terminado de editar su página, no olvide hacer clic en el botón ‘Guardar’ en la esquina superior derecha de la pantalla.
Si está listo, puede hacer clic en ‘Publicar’ para que la página se publique, o puede hacer clic en ‘Vista previa’ para asegurarse de que se ve como lo desea.
También puede hacer clic en ‘Guardar como plantilla’ para poder reutilizar este diseño con SeedProd en otras partes de su sitio web.
Así es como se veían las fuentes de iconos 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 web o la mejor página de destino plugins para WordPress.
, WordPress. Twitter y Facebook.
Cómo usar fuentes de iconos en el editor de publicaciones de WordPress (sin código) .
visto en: wpbeginner