¿Quieres utilizar fuentes de iconos en el editor de publicaciones de WordPress?
Las fuentes de iconos le permiten utilizar fácilmente imágenes y símbolos en el texto. Son livianas, 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 utilizar fácilmente fuentes de iconos 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 del 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 utilizar este método en cualquier tipo de sitio web de WordPress. Es fácil de usar y funciona perfectamente con el editor de bloques.
Primero necesitas instalar y activar el archivo. Iconos de texto enriquecido de JVM conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Después de 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 ícono de Bandera en la barra de herramientas del bloque.
Al hacer clic en él, aparecerá una ventana emergente de iconos para elegir. De forma predeterminada, utiliza las populares fuentes de iconos Font Awesome.
Puede utilizar 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 íconos es que puedes usar CSS para darles estilo.
Sin embargo, como ya estás usando el editor de bloques, puedes simplemente usar las herramientas de color integradas para diseñar los íconos.
El complemento le permite usar fuentes de iconos en la mayoría de los bloques de texto, como párrafo, lista, botón, columnas, portada y más.
A continuación se muestra un ejemplo del uso de fuentes de íconos y opciones de bloque para diseñar tres columnas.
Otro ejemplo útil del uso de fuentes de iconos es el de los botones.
Esta vez utilizamos las fuentes de los iconos en línea junto con el texto de los dos botones.
No dudes en utilizar herramientas del editor de bloques, como alineación de texto, colores, espaciado y más, para aprovechar al máximo las fuentes de tus iconos.
Método 2. Agregar fuentes de íconos en el editor de publicaciones de WordPress con Font Awesome
Este método requiere agregar códigos cortos en el editor de publicaciones para mostrar las fuentes de los íconos. Puede utilizar este método si no necesita utilizar fuentes de iconos con regularidad en sus publicaciones y páginas de WordPress.
Primero necesitas instalar y activar el archivo. Personaje fantástico conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez activado, puede editar una publicación o página en WordPress y usar el siguiente código corto para agregar un ícono de fuente.
El parámetro de nombre aquí es el nombre de la fuente utilizada por Font Awesome. Puedes encontrar la lista completa en Fantástica hoja de trucos para personajes. página.
Una vez agregado, puede obtener una vista previa de su publicación o página para ver cómo aparecerá el ícono en el sitio en vivo, ya que no aparecerá como ícono en el editor de bloques.
Así es como se veía en nuestro sitio de prueba.
Puede usar el código corto dentro de un párrafo y en línea con otro texto. También puedes agregarlo tú mismo usando el bloque “Código corto”.
Sin embargo, usar el bloque “Código corto” no le brindará las opciones de estilo que obtiene con otros bloques de texto.
También puede agregar el código corto dentro de las columnas para crear una fila de características.
Sería un poco más complicado porque no podrás ver las imágenes reales y la altura de las columnas seguirá cambiando dentro del editor.
Así es como se veía en nuestro sitio web de prueba. Las columnas tienen la misma altura, incluso si no están en el editor.
Probablemente necesitarás obtener una vista previa de tu trabajo en una nueva pestaña del navegador varias veces para ver cómo se mostrará a los usuarios.
Método 3. Usar fuentes de iconos con 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 SemillaProd.
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 un tema de sitio web completo.
Primero necesitas instalar y activar el archivo. SemillaProd conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, se le pedirá que ingrese la clave de licencia del complemento. Puede encontrar esta información en su cuenta en el sitio web de SeedProd.
Una vez que ingrese su clave de licencia y haga clic en “Verificar clave”, podrá comenzar a trabajar en su página de inicio.
solo ve a SeedProd » Páginas de destino página y haga clic en el botón “Agregar nueva página de destino”.
A continuación, se le pedirá que elija una plantilla para su página de destino.
SeedProd viene con un conjunto de hermosos diseños de páginas de destino que puede usar como punto de partida, o puede comenzar con una plantilla en blanco y diseñarlo todo usted mismo.
Para este tutorial usaremos una plantilla predefinida. 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.
Una vez que los haya ingresado, haga clic en el botón “Guardar y comenzar a editar la página” para continuar.
SeedProd ahora iniciará la interfaz del creador de páginas. Es una herramienta de diseño de arrastrar y soltar donde simplemente puedes señalar y hacer clic en cualquier elemento para editarlo.
También puedes arrastrar y soltar bloques desde la columna de la izquierda para agregar nuevos elementos a tu diseño.
Por el bien de 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 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 utilizar iconos en SeedProd es agregar el bloque “Icon Box”.
La diferencia entre este y el bloque “Ícono” que usamos anteriormente es que el “Cuadro de íconos” le permite agregar texto junto con el ícono elegido.
Esta es una de las formas más comunes de utilizar íconos al mostrar características de productos, servicios y otros elementos.
Puedes colocar el cuadro de iconos dentro de las columnas, elegir colores y ajustar el tamaño del icono a tu gusto.
Además, también puede formatear el texto adjunto 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 publicar la página, 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 diseño con SeedProd en otras partes de su sitio web.
Así es como se veían las fuentes de los íconos en nuestro sitio web de prueba.
Esperamos que este artículo te haya ayudado a aprender cómo usar fuentes de íconos en el editor de publicaciones de WordPress sin escribir código HTML. Es posible que también desee consultar nuestra guía de rendimiento de WordPress para optimizar la velocidad de su sitio web o los mejores complementos de página de destino para WordPress.
