ThemeLocal: consejos de blog que funcionan como magia
  • Blogging

    7 formas de reducir el tamaño de los archivos PDF

    Por qué la mayoría de los consejos de blogs fallan (y cómo solucionarlo)

    7 preguntas esenciales que todo bloguero debe hacerse

    Cómo escribir contenido que mantenga a sus lectores con ganas de más

    Qué hacer cuando su blog es pirateado

    Cómo escribir más rápido: 10 consejos sencillos para duplicar su salida de escritura

    Cómo monitorear tendencias de manera productiva y escribir contenido de interés periodístico

    Cómo planificar contenido como Walter Bishop

    Cómo escribir la publicación de blog definitiva: una hoja de trucos de un blogger

  • WordPress
    • Todos
    • Plugins
    • Themes

    Los 11 mejores temas de WordPress para afiliados de Amazon en 2022

    Los 5 mejores temas NFT de WordPress de 2022

    Cómo agregar colaboración en el editor de bloques de WordPress (estilo Google-Doc)

    Cómo aceptar Google Pay en WordPress (la manera fácil)

    Los 9 mejores temas de WordPress para generación de prospectos en 2022

    Cómo personalizar la página de resultados de búsqueda de productos de WooCommerce

    Cómo aceptar pagos ACH en WordPress

    Cómo agregar planes de pago «Compre ahora y pague después» a WordPress

    Cómo aceptar Apple Pay en WordPress (la forma FÁCIL)

  • Marketing por correo

    Cómo utilizar los blogs de invitados para crear su lista de correo electrónico

    Las métricas de marketing por correo electrónico en las que debe basarse cada campaña

    Cómo utilizar un formulario de contacto para crear su lista de correo electrónico

  • SEO

    Cómo corregir errores 404 de tipo de publicación personalizada en WordPress

    Aumente el tráfico a su sitio de WordPress en 6 sencillos pasos

    Cómo no seguir automáticamente enlaces externos en WordPress

    Cómo clasificar más alto en los motores de búsqueda

    Cómo eliminar enlaces rotos de su sitio de WordPress para siempre

    Guía para principiantes de SEO: introducción, preparación y jerga

    Investigación y uso de palabras clave de WordPress para SEO

    Mejore el SEO con vínculos de retroceso, velocidad del sitio y más

    Las 10 funciones más importantes de Yoast SEO para WordPress

  • Redes sociales

    Cómo agregar un recordatorio a una publicación de Instagram

    Cómo programar pines de Pinterest gratis

    Cómo volverse viral en Instagram: la guía para principiantes

    5 excelentes formas de diversificar las actualizaciones de sus redes sociales para generar más tráfico y participación

    ¿Puedes usar Instagram para hacer crecer tu negocio?

    6 formas efectivas de marcarte en las redes sociales

    6 consejos inteligentes de marketing en Instagram para impulsar su negocio

    Cómo convertir su perfil personal de Instagram en un perfil comercial

    Revisión de Shorby: Dirija el tráfico desde las redes sociales con páginas de destino y más

  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Sin resultados
Ver todos los resultados
  • Blogging

    7 formas de reducir el tamaño de los archivos PDF

    Por qué la mayoría de los consejos de blogs fallan (y cómo solucionarlo)

    7 preguntas esenciales que todo bloguero debe hacerse

    Cómo escribir contenido que mantenga a sus lectores con ganas de más

    Qué hacer cuando su blog es pirateado

    Cómo escribir más rápido: 10 consejos sencillos para duplicar su salida de escritura

    Cómo monitorear tendencias de manera productiva y escribir contenido de interés periodístico

    Cómo planificar contenido como Walter Bishop

    Cómo escribir la publicación de blog definitiva: una hoja de trucos de un blogger

  • WordPress
    • Todos
    • Plugins
    • Themes

    Los 11 mejores temas de WordPress para afiliados de Amazon en 2022

    Los 5 mejores temas NFT de WordPress de 2022

    Cómo agregar colaboración en el editor de bloques de WordPress (estilo Google-Doc)

    Cómo aceptar Google Pay en WordPress (la manera fácil)

    Los 9 mejores temas de WordPress para generación de prospectos en 2022

    Cómo personalizar la página de resultados de búsqueda de productos de WooCommerce

    Cómo aceptar pagos ACH en WordPress

    Cómo agregar planes de pago «Compre ahora y pague después» a WordPress

    Cómo aceptar Apple Pay en WordPress (la forma FÁCIL)

  • Marketing por correo

    Cómo utilizar los blogs de invitados para crear su lista de correo electrónico

    Las métricas de marketing por correo electrónico en las que debe basarse cada campaña

    Cómo utilizar un formulario de contacto para crear su lista de correo electrónico

  • SEO

    Cómo corregir errores 404 de tipo de publicación personalizada en WordPress

    Aumente el tráfico a su sitio de WordPress en 6 sencillos pasos

    Cómo no seguir automáticamente enlaces externos en WordPress

    Cómo clasificar más alto en los motores de búsqueda

    Cómo eliminar enlaces rotos de su sitio de WordPress para siempre

    Guía para principiantes de SEO: introducción, preparación y jerga

    Investigación y uso de palabras clave de WordPress para SEO

    Mejore el SEO con vínculos de retroceso, velocidad del sitio y más

    Las 10 funciones más importantes de Yoast SEO para WordPress

  • Redes sociales

    Cómo agregar un recordatorio a una publicación de Instagram

    Cómo programar pines de Pinterest gratis

    Cómo volverse viral en Instagram: la guía para principiantes

    5 excelentes formas de diversificar las actualizaciones de sus redes sociales para generar más tráfico y participación

    ¿Puedes usar Instagram para hacer crecer tu negocio?

    6 formas efectivas de marcarte en las redes sociales

    6 consejos inteligentes de marketing en Instagram para impulsar su negocio

    Cómo convertir su perfil personal de Instagram en un perfil comercial

    Revisión de Shorby: Dirija el tráfico desde las redes sociales con páginas de destino y más

  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Sin resultados
Ver todos los resultados
ThemeLocal: consejos de blog que funcionan como magia
Sin resultados
Ver todos los resultados
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
Inicio WordPress Themes

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

Hace 7 meses
en Themes
Tiempo de leer:11 minutos de lectura
A A
0
Compartir en FacebookCompartir en Twitter

¿Desea agregar fuentes de iconos en su sitio de WordPress? Recientemente, uno de nuestros lectores preguntó cuál es la forma más fácil de agregar fuentes de iconos en su tema de WordPress.

Las fuentes de iconos le permiten agregar iconos vectoriales (redimensionables) sin ralentizar su sitio web. Se cargan como fuentes web y se pueden diseñar con CSS.

En este artículo, le mostraremos cómo agregar fácilmente fuentes de iconos en su tema de WordPress, paso a paso.

¿Qué son las fuentes de iconos y por qué debería usarlas?

Las fuentes de iconos contienen símbolos o pictogramas en lugar de letras y números. Estos pictogramas se pueden agregar fácilmente al contenido del sitio web y cambiar su tamaño usando CSS. En comparación con los íconos basados ​​en imágenes, los íconos de fuentes son mucho más rápidos, lo que ayuda con la velocidad general de su sitio web de WordPress.

Vista previa de fuentes de iconos

Las fuentes de iconos se pueden utilizar para mostrar iconos de uso común. Por ejemplo, puede usarlos con su carrito de compras, botones de descarga, cuadros de funciones, concursos de sorteos e incluso en los menús de navegación de WordPress.

Hay varias fuentes de íconos gratuitas y de código abierto disponibles que tienen cientos de hermosos íconos.

De hecho, cada instalación de WordPress viene con la dashicons conjunto de fuentes de iconos. Estos iconos se utilizan en el menú de administración de WordPress y otras áreas dentro del área de administración de WordPress.

Algunas otras fuentes de iconos populares son:

  • Fuente impresionante
  • Genericons
  • IcoMoon
  • Linearicons
  • Iconos de material de Google
  • El Proyecto Noun

Por el bien de este tutorial, usaremos Font Awesome. Es la fuente de iconos de código abierto y gratuita más popular disponible. Usamos FontAwesome en el sitio web de Themelocal, así como nuestros complementos de WordPress como OptinMonster, WPForms, RafflePressetc.

En esta guía, cubriremos tres formas de agregar fuentes de iconos en WordPress. Puede elegir la solución que mejor se adapte a sus necesidades.

Agregar fuentes de iconos en WordPress usando complementos

Si eres un usuario de nivel principiante y solo intentas agregar algunos íconos a tus publicaciones o páginas, este método es adecuado para ti. No tendría que modificar los archivos de tema y podría utilizar fuentes de iconos en todas partes de su sitio web.

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

Tras la activación, el complemento habilita la compatibilidad con Font Awesome para su tema. Ahora puede editar cualquier publicación o página de WordPress y usar un código corto de icono como este:

[icon name=”rocket”]

Puede usar este shortcode junto con otro texto o solo en un bloque de shortcode dedicado.

Agregar código corto de fuente de icono en WordPress

Una vez agregado, puede obtener una vista previa de su publicación o página para ver cómo se verá el ícono en un sitio en vivo. Así es como se veía en nuestro sitio de prueba.

Vista previa del icono

También puede agregar el código abreviado del icono de fuente dentro de un bloque de párrafo por sí solo, donde puede usar la configuración del bloque para aumentar el tamaño del icono.

Aumentar el tamaño del icono

A medida que aumenta el tamaño del texto, esto puede parecer extraño dentro del editor de texto. Eso es porque el código abreviado no cambia automáticamente a una fuente de icono dentro del editor de bloques.

Deberá hacer clic en el botón de vista previa en su publicación o página para ver cómo se vería el tamaño real del icono.

Fuente de icono ampliada

También puede usar el código abreviado del icono dentro de las columnas y crear cuadros de características como este:

Uso de fuentes de iconos en cuadros de funciones

2. Uso de fuentes de iconos con un creador de páginas de WordPress

Los complementos de creación de páginas de WordPress más populares vienen con soporte incorporado para fuentes de iconos. Esto le permite utilizar fácilmente fuentes de iconos en sus páginas de destino, así como en otras áreas de su sitio web.

Constructor de castores

Beaver Builder es el mejor complemento de creación de páginas de WordPress del mercado. Le permite crear fácilmente diseños de página personalizados en WordPress sin escribir ningún código.

Beaver Builder viene con hermosos íconos y módulos listos para usar que puedes arrastrar y soltar en tu publicación y páginas.

Módulos de iconos de Beaver Builder

Puede crear grupos de iconos, agregar un solo icono y moverlos a filas y columnas bien posicionadas. También puede seleccionar sus propios colores, fondo, espaciado y margen sin escribir CSS.

Editar fuentes de iconos en Beaver Builder

Incluso puede crear temas de WordPress completamente personalizados sin escribir ningún código utilizando el producto Themer de Beaver Builder.

Elementor Pro

Elementor es otro popular complemento de creación de páginas de WordPress. También viene con varios elementos que le permiten usar fuentes de iconos, incluido un elemento Icon.

Icono de elementor

Puede simplemente arrastrar y soltar un icono en cualquier lugar y usarlo con filas, columnas y tablas para crear hermosas páginas.

Otros creadores de páginas populares como Divi y Visual Composer también tienen soporte completo para fuentes de iconos.

3. Agregar fuentes de iconos en WordPress manualmente con código

Como mencionamos anteriormente, las fuentes de iconos son solo fuentes y se pueden agregar a su sitio como agregaría cualquier fuente personalizada.

Algunas fuentes de iconos, como Font Awesome, están disponibles en servidores CDN en la web y se pueden vincular directamente desde su tema de WordPress.

También puede cargar todo el directorio de fuentes en una carpeta en su tema de WordPress y luego usar esas fuentes en su hoja de estilo.

Dado que estamos usando Font Awesome para este tutorial, le mostraremos cómo puede agregarlo usando ambos métodos.

Método 1:

Este método manual es bastante sencillo.

Primero, debe visitar el Fuente impresionante sitio web e ingrese su dirección de correo electrónico para obtener el código de inserción.

Obtenga el código de inserción de Font Awesome

Ahora busque en su bandeja de entrada un correo electrónico de Font Awesome con su código de inserción. Copie y pegue este código de inserción en el archivo header.php de su tema de WordPress justo antes del </head> etiqueta.

Su código de inserción será una sola línea que obtendrá la biblioteca Font Awesome directamente de sus servidores CDN. Se verá algo como esto:

<script src="https://use.fontawesome.com/123456abc.js"></script>

Este método es el más simple, pero puede causar conflictos con otros complementos.

Un mejor enfoque sería cargar JavaScript correctamente en WordPress utilizando el mecanismo de puesta en cola incorporado.

En lugar de vincular a la hoja de estilo desde la plantilla de encabezado de su tema, puede agregar el siguiente código en el archivo functions.php de su tema o en un complemento específico del sitio.

function wpb_load_fa() {

wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Método 2:

El segundo método no es el más fácil, pero le permitiría alojar las fuentes de iconos de Font Awesome en su propio sitio web.

Primero, debe visitar el sitio web de Font Awesome para descargar el paquete de fuentes en su computadora.

Descargue la fuente del icono a su computadora

Simplemente descargue las fuentes de los iconos y descomprima el paquete.

Ahora, deberá conectarse a su alojamiento de WordPress utilizando un cliente FTP e ir al directorio de su tema de WordPress.

Necesita crear una nueva carpeta allí y nombrarla fuentes. A continuación, debe cargar el contenido de la carpeta de fuentes de iconos en el directorio de fuentes de su servidor de alojamiento web.

Subir fuentes de iconos a su tema de WordPress

Ahora está listo para cargar fuentes de iconos en su tema de WordPress. Simplemente agregue este código al archivo functions.php de su tema o en un complemento específico del sitio.

function wpb_load_fa() {

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Ha cargado con éxito Font Awesome en su tema de WordPress.

Ahora viene la parte en la que agregará íconos reales a su tema, publicaciones o páginas de WordPress.

Visualización manual de fuentes de iconos en WordPress

Ve a la Sitio web de Font Awesome para ver la lista completa de iconos disponibles. Haga clic en cualquier icono que desee utilizar y podrá ver el nombre del icono.

Nombre icónico

Copie el nombre del icono y utilícelo así en WordPress.

<i class="fa-arrow-alt-circle-up"></i> 

Puede diseñar este icono en la hoja de estilo de su tema de esta manera:

.fa-arrow-alt-circle-up { 
font-size:50px; 
color:#FF6600; 
}

También puede combinar diferentes iconos y diseñarlos a la vez. Por ejemplo, digamos que desea mostrar una lista de enlaces con iconos junto a ellos. Puede envolverlos bajo un elemento

con una clase específica.

<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Ahora puede diseñarlos en la hoja de estilo de su tema de esta manera:

.icons-group-item i { 
color: #333; 
font-size: 50px; 
} 
.icons-group-item i:hover { 
color: #FF6600
} 

Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente fuentes de iconos en su tema de WordPress. Es posible que también desee echar un vistazo a nuestro tutorial sobre cómo agregar íconos de imagen con menús de navegación en WordPress.

Share30Tweet19Send
Página anterior

Cómo crear un menú de navegación flotante fijo en WordPress

Página siguiente

Cómo agregar un visor de PDF en WordPress

Relacionado Mensajes

Cómo

Cómo solucionar el error de luces inalcanzables de Philips Hue

Hace 9 mins
Tecnología

Cómo ver Wimbledon 2022 en 4K HDR en el Reino Unido: información de transmisión UHD aquí

Hace 17 mins
Cómo

¿Las notificaciones de Apple Watch o el Centro de control no funcionan? Como arreglar

Hace 5 horas
Carga más
Página siguiente

Cómo agregar un visor de PDF en WordPress

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

RECOMENDADO

Cómo instalar fuentes en Photoshop

Hace 6 días

F1 2022: Todo lo que necesitas saber

Hace 4 días

Cómo eliminar mensajes de Apple Watch a granel (2022)

Hace 4 meses

Redmi Note 11 vs Redmi Note 11 Pro: ¿cuál es la diferencia?

Hace 5 meses

Cómo agregar un formulario de pago de PayPal en WordPress (paso a paso)

Hace 3 meses
ThemeLocal: consejos de blog que funcionan como magia

Ayudamos a emprendedores inteligentes a convertir sus blogs en negocios rentables. Somos un blog galardonado que ha estado ayudando a blogueros y emprendedores desde 2020.

Síguenos

Noticias recientes

Cómo solucionar el error de luces inalcanzables de Philips Hue

junio 30, 2022

Cómo ver Wimbledon 2022 en 4K HDR en el Reino Unido: información de transmisión UHD aquí

junio 30, 2022
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar

© 2022 ThemeLocal. Tous droits réservés.

Sin resultados
Ver todos los resultados
  • Blogging
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • Marketing por correo
  • Monetización
  • SEO
  • Redes sociales
  • Tutoriales
  • Críticas
  • Consejo
  • Seguridad
  • Software y servicios
  • Generación de tráfico
  • Guia de principiantes
  • Escaparate

© 2022 ThemeLocal. Tous droits réservés.