ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Search
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
Lectura: Cómo agregar fácilmente fuentes de iconos en su tema de WordPress
Cuota
Notificación Mostrar más
Últimas noticias
Cómo convertir RAW a JPG
Cómo
La PS5 obtiene un sabroso recorte de precio, y puede agregar los auriculares Pulse 3D por 99p
Ofertas
Amazon Luna está cometiendo los mismos errores fatales que Google Stadia
Reseñas de tecnología
Primeras impresiones: revisión de Xiaomi Redmi Note 12 5G
Reseñas de tecnología
Xiaomi Redmi Note 12 Pro 5G vs Note 12 Pro Plus 5G: ¿cuál es la diferencia?
Versus
Aa
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Aa
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
Search
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Síganos
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
ThemeLocal: consejos de blog que funcionan como magia > Blog > WordPress > Themes > Cómo agregar fácilmente fuentes de iconos en su tema de WordPress
Themes

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

Última actualización: noviembre 19, 2021 12:18 am
ThemeLocal hace 1 año 11 Minutos mínimos para leer
Cuota
11 Minutos mínimos para leer
Cuota

¿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.

Contents
¿Qué son las fuentes de iconos y por qué debería usarlas?Agregar fuentes de iconos en WordPress usando complementos2. Uso de fuentes de iconos con un creador de páginas de WordPress3. Agregar fuentes de iconos en WordPress manualmente con códigoVisualización manual de fuentes de iconos en 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.

También podría gustarte

Cómo convertir RAW a JPG

La PS5 obtiene un sabroso recorte de precio, y puede agregar los auriculares Pulse 3D por 99p

Cómo usar la herramienta Black Point para editar fotos de iPhone y por qué es posible que desee hacerlo

Cómo responder llamadas con AirPods usando Siri

Cómo habilitar el modo oscuro en NordVPN

ETIQUETADO: agregar, Cómo, fácilmente, fuentes, iconos, tema, WordPress
ThemeLocal noviembre 19, 2021
Comparte este artículo
Facebook Twitter Pinterest Whatsapp Whatsapp
Cuota
¿Qué piensas?
Amor0
Triste0
Contento0
Somnoliento0
Enfadado0
Sin comentarios0
Guiño0
Artículo anterior Cómo crear un menú de navegación flotante fijo en WordPress
Artículo siguiente Cómo agregar un visor de PDF en WordPress
Deja un comentario

Deja una respuesta Cancelar la respuesta

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

Publicación popular

Cómo corregir el seguimiento de pasos inexacto de Apple Watch
Cómo
Cómo crear un GIF en Photoshop
Cómo
Oppo Find X6 Pro vs Samsung Galaxy S23 Ultra: todas las diferencias clave
Versus
Sonido y visión: no me molesta tanto otro retraso de Spotify HiFi
Reseñas de tecnología
El Apple Watch Series 9 de 2023: qué esperar de Apple este otoño
Guías
Esta oferta de Pixel 6a le brinda datos ilimitados a bajo precio
Ofertas

También podría gustarte

Cómo

Cómo convertir RAW a JPG

hace 4 horas 2 Minutos mínimos para leer
Ofertas

La PS5 obtiene un sabroso recorte de precio, y puede agregar los auriculares Pulse 3D por 99p

hace 4 horas 3 Minutos mínimos para leer
Cómo

Cómo usar la herramienta Black Point para editar fotos de iPhone y por qué es posible que desee hacerlo

hace 14 horas 3 Minutos mínimos para leer
Cómo

Cómo responder llamadas con AirPods usando Siri

hace 18 horas 3 Minutos mínimos para leer
Cómo

Cómo habilitar el modo oscuro en NordVPN

hace 21 horas 2 Minutos mínimos para leer
Cómo

Cómo cambiar el fondo de escritorio en Windows 11

hace 1 día 3 Minutos mínimos para leer
Cómo

Cómo duplicar fotos y videos en iPhone y iPad

hace 1 día 2 Minutos mínimos para leer
Cómo

iOS 16.4 Beta: Cómo atenuar automáticamente el video cuando se detectan destellos de luz

hace 1 día 2 Minutos mínimos para leer
Mostrar más
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Síganos

© 2022 Themelocal. Reservados todos los derechos.

  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar

Removed from reading list

Deshacer
Welcome Back!

Sign in to your account

¿Perdiste tu contraseña?