M√°s

    Cómo agregar fácilmente fuentes de iconos en su tema de WordPress

    - Advertisement -

    ¬ŅDesea 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 web. Incluso puede dise√Īarlos usando CSS para obtener exactamente el aspecto que desea.

    En este artículo, le mostraremos cómo agregar fácilmente fuentes de iconos en 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.

    Fuentes de iconos de Font Awesome

    La mayor√≠a de los visitantes comprender√°n de inmediato lo que significa un √≠cono de uso com√ļn. De esta manera, puede ayudar a los visitantes a orientarse en su sitio web y a 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 iconos 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 para que puedan 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, como IcoMoon, genéricosy Linearicons.

    De hecho, el software de WordPress viene con iconos dashicon gratuitos incorporados. Estos son los iconos que puedes ver en el área de administración de WordPress.

    Iconos de fuentes en el tablero de WordPress

    En esta guía, usaremos fuente impresionante 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.

    Dicho esto, veamos cómo puede agregar fácilmente fuentes de iconos en su tema de WordPress. Simplemente use los enlaces rápidos para saltar 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 íconos a WordPress es usando el fuente impresionante enchufar. Esto le permite usar fuentes de iconos en sus páginas y publicaciones sin modificar sus archivos de tema. También obtendrá nuevos íconos de Font Awesome automáticamente cada vez que actualice el complemento.

    Lo primero que debe hacer es instalar y activar el complemento Font Awesome. 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 agregar un √≠cono de Font Awesome a cualquier bloque de shortcode. Simplemente abra la p√°gina o publicaci√≥n donde desea mostrar la fuente del icono y luego haga clic en el icono ‚Äė+‚Äô.

    Ahora puede buscar ‚ÄėC√≥digo corto‚Äô y seleccionar el bloque correcto cuando aparezca.

    Agregar un ícono de fuente a WordPress usando shortcode

    Una vez hecho esto, puede agregar cualquier ícono de Font Awesome usando el siguiente código abreviado:

    Simplemente reemplace ¬ęcohete¬Ľ con el nombre del √≠cono que desea mostrar. Para obtener este nombre, dir√≠jase al sitio de Font Awesome y haga clic en el √≠cono que desea usar.

    Elegir una fuente de icono para su sitio web de WordPress

    En la ventana emergente que aparece, contin√ļe y haga clic en el nombre del icono.

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

    Obtener el nombre de un icono de fuente

    Una vez hecho esto, simplemente pegue el nombre en el c√≥digo abreviado. Ahora puede hacer clic en ‚ÄėPublicar‚Äô o ‚ÄėActualizar‚Äô para activar la fuente del icono.

    A veces, es posible que desee mostrar una fuente de icono dentro de 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 pegue el código abreviado dentro de cualquier bloque de párrafo.

    Agregar una fuente de icono en WordPress usando un shortcode

    Luego puede usar la configuraci√≥n en el men√ļ de la derecha para personalizar el √≠cono, de manera similar a como personaliza las opciones para los bloques de texto. Por ejemplo, puede cambiar el tama√Īo de fuente.

    WordPress convertirá el código abreviado en un ícono de Font Awesome para los visitantes y lo mostrará junto con su texto.

    Un ejemplo de una fuente de icono en WordPress

    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 de su sitio o una sección similar.

    Agregar una fuente de icono a un √°rea lista para widgets en WordPress

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

    Incluso puede agregar el código abreviado del ícono a las columnas y crear hermosos cuadros de características.

    Un ejemplo de un cuadro de características en un sitio web de WordPress

    Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar cuadros de funciones con iconos en WordPress.

    Muchos sitios web utilizan fuentes de iconos en sus men√ļs para ayudar a los visitantes a orientarse. Para agregar un √≠cono, cree un nuevo men√ļ o abra un men√ļ existente en el 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‚Äô.

    Agregar clases de CSS a un men√ļ de navegaci√≥n de WordPress

    Una vez hecho esto, simplemente haga clic para expandir el elemento del men√ļ donde desea mostrar el icono.

    Ahora deber√≠a ver un nuevo campo ‚ÄėClases CSS‚Äô.

    Agregar una fuente de icono usando una clase CSS

    Para obtener la clase CSS de un ícono, simplemente busque la fuente del ícono en el sitio web de Font Awesome y haga clic en ella. 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.

    Obtener el código para una fuente de icono

    Simplemente copie el texto dentro de las comillas, luego vuelva al panel de control de WordPress.

    Ahora puede pegar el texto en el campo ‚ÄėClases CSS‚Äô.

    Agregar fuentes de iconos en WordPress usando una clase CSS

    Para agregar m√°s fuentes de iconos, simplemente siga el mismo proceso descrito anteriormente.

    Cuando est√© satisfecho con la configuraci√≥n del men√ļ, haga clic en ‚ÄėGuardar‚Äô. Ahora, si visitas tu sitio web de WordPress, ver√°s el men√ļ de navegaci√≥n actualizado.

    Un ejemplo de fuentes de iconos en un men√ļ de navegaci√≥n de WordPressM√©todo 2. Uso de fuentes de iconos con SeedProd (m√°s personalizable)

    Si desea más libertad sobre dónde usa los iconos 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 en el mercado y tiene más de 1400 íconos Font Awesome incorporados. También tiene un cuadro de iconos listo para usar que puede agregar a cualquier página arrastrando y soltando.

    Con SeedProd, es fácil crear páginas personalizadas en WordPress y luego mostrar íconos de Font Awesome en cualquier lugar de esas páginas.

    Lo primero que debe hacer es instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.

    Nota: Hay un versión gratuita de SeedProdpero usaremos la versión Pro ya que viene con el cuadro Icon.

    Tras la activaci√≥n, vaya a SeedProd ¬Ľ Ajustes e ingrese su clave de licencia.

    Introducción de la clave de licencia de SeedProd

    Puede encontrar esta informaci√≥n en 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‚Äô.

    A continuaci√≥n, debe visitar SeedProd ¬Ľ P√°ginas y haga clic en el bot√≥n ‚ÄėAgregar nueva p√°gina de destino‚Äô.

    Elegir un dise√Īo personalizado para su p√°gina de WordPress

    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 de acuerdo con las necesidades de su blog o sitio web de WordPress.

    Para seleccionar una plantilla, pase el mouse sobre ella y luego haga clic en el √≠cono ‚ÄėMarca de verificaci√≥n‚Äô.

    Elegir una plantilla dise√Īada profesionalmente

    Estamos usando la plantilla ‚ÄėP√°gina de ventas de libros electr√≥nicos‚Äô en todas nuestras im√°genes, pero puede usar cualquier dise√Īo que desee.

    A continuaci√≥n, contin√ļe y escriba un nombre para la p√°gina personalizada. SeedProd crear√° autom√°ticamente una URL basada en el t√≠tulo de la p√°gina, pero puede cambiar esta URL a cualquier cosa que desee.

    Cuando est√© satisfecho con la informaci√≥n que ingres√≥, haga clic en el bot√≥n ‚ÄėGuardar y comenzar a editar la p√°gina‚Äô.

    Agregar un t√≠tulo a un dise√Īo de p√°gina de SeedProd

    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.

    Personalización de una plantilla de página de WordPress de SeedProd

    El men√ļ de la izquierda tambi√©n tiene bloques que puede arrastrar a su 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.

    Agregar bloques a una p√°gina o dise√Īo de publicaci√≥n en WordPress

    Para personalizar cualquier bloque, simplemente haga clic para seleccionarlo en su dise√Īo.

    El men√ļ de la izquierda ahora mostrar√° todas las configuraciones que puede usar para personalizar ese bloque. Por ejemplo, a menudo puede cambiar 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.

    Crear un dise√Īo personalizado para un sitio web de WordPress

    Para agregar una fuente de icono a la p√°gina, simplemente busque el bloque ‚ÄėIcono‚Äô en la columna de la izquierda y luego arr√°strelo a su dise√Īo.

    SeedProd mostrar√° un icono de ‚Äėflecha‚Äô por defecto.

    Agregar una fuente de icono en WordPress usando SeedProd

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

    En el men√ļ de la izquierda, pase el mouse sobre el √≠cono y luego haga clic en el bot√≥n ‚ÄėBiblioteca de √≠conos‚Äô cuando aparezca.

    Elegir un ícono de fuente usando un generador de páginas

    Ahora verá todos los diferentes íconos de Font Awesome que puede elegir.

    Simplemente busque el icono de fuente que desea usar y haga clic en él.

    Biblioteca de fuentes de iconos integrada de SeedProd

    SeedProd ahora agregar√° el √≠cono a su dise√Īo.

    Despu√©s de elegir un √≠cono, puede cambiar su alineaci√≥n, color y tama√Īo usando la configuraci√≥n en el men√ļ de la izquierda.

    Cómo personalizar un icono de fuente usando SeedProd

    Puede continuar trabajando en la p√°gina agregando m√°s bloques y personaliz√°ndolos 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 esa p√°gina est√© activa.

    Publicaci√≥n de un dise√Īo de p√°gina personalizado con un icono de fuente

    Esperamos que este art√≠culo le haya ayudado a aprender c√≥mo agregar fuentes de iconos en su tema de WordPress. Tambi√©n puede consultar nuestra gu√≠a sobre los mejores complementos emergentes comparados y c√≥mo elegir el mejor software de dise√Īo web.

    Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.


    Fuente: Cómo agregar fácilmente fuentes de iconos en su tema de WordPress

    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.