M谩s

    C贸mo usar fuentes de iconos en el editor de publicaciones de WordPress (sin c贸digo)

    - Advertisement -

    驴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 enchufar. Para obtener m谩s detalles, consulte nuestra gu铆a paso a paso sobre c贸mo instalar un complemento de WordPress.

    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.

    Bot贸n de fuente de icono 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.

    Elija iconos para insertar

    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.

    Fuentes de iconos de estilo usando las herramientas del editor de bloques

    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.

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

    Fuentes de iconos en 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.

    Uso de fuentes de iconos en botones y listas

    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 enchufar. Para obtener m谩s detalles, consulte nuestra gu铆a paso a paso sobre c贸mo instalar un complemento de WordPress.

    鉂 Tambi茅n te interesa:馃摲 Como personalizar el color de fondo del editor de bloquesC贸mo personalizar el color de fondo del editor de bloques de WordPress

    Tras la activaci贸n, puede editar una publicaci贸n o p谩gina en WordPress y usar el siguiente c贸digo abreviado para agregar un 铆cono de fuente.

    Agregar fuentes de iconos usando shortcode

    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.

    Vista previa del icono de fuente

    Puede usar el c贸digo abreviado 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 c贸digo abreviado dentro de las columnas para crear una fila de caracter铆sticas.

    Shortcode en columnas

    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.

    Vista previa de fuentes de 铆conos usando Font Awesome

    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.

    Creador de sitios web de WordPress SeedProd

    En primer lugar, debe instalar y activar el Producto de semilla enchufar. 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 de su complemento. Puede encontrar esta informaci贸n en su cuenta en el sitio web de SeedProd.

    Clave de licencia 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 destino y haga clic en el bot贸n ‘Agregar nueva p谩gina de destino’.

    A帽adir 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.

    鉂 Tambi茅n te interesa:How to Protect Your WooCommerce Store from FraudC贸mo proteger su tienda WooCommerce del fraude

    Elija la plantilla de la p谩gina de destino

    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.

    Proporcione el t铆tulo de la p谩gina y la 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.

    Interfaz del creador de p谩ginas SeedProd

    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.

    A帽adir bloque de iconos

    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.

    Configuraci贸n del bloque de iconos

    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.

    Bloque de cuadro de icono

    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.

    Cuadro de iconos dentro de las columnas

    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.

    Guarde y publique su p谩gina de destino

    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.

    Vista previa de fuentes de iconos

    鉂 Tambi茅n te interesa:馃摲 Como crear y administrar archivos Adstxt en WordPress FacilC贸mo crear y administrar archivos Ads.txt en WordPress (F谩cil)

    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 los mejores complementos de p谩gina de destino para WordPress.

    Fuente: C贸mo usar fuentes de iconos en el editor de publicaciones de WordPress (sin c贸digo)

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.