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

¿Quiere agregar fuentes de iconos a 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 (de tamaño variable) 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 a 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 contribuye a la velocidad general de su sitio web de WordPress.

Las fuentes de iconos se pueden utilizar para mostrar iconos de uso común. Por ejemplo, puede usarlos con su carrito, botones de descarga, cuadros de características, un concurso de sorteos e incluso en los menús de navegación de WordPress. Hay varias fuentes de iconos de código abierto y gratuitas disponibles que contienen cientos de hermosos iconos. De hecho, cada instalación de WordPress viene con el conjunto de fuentes de iconos de dashicons gratuitos. Estos iconos se utilizan en el menú de administración de WordPress y otras áreas del área de administración de WordPress. Aquí hay algunas otras fuentes de iconos populares: Para los propósitos 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 MundoCMS, así como nuestros complementos de WordPress como OptinMonster, WPForms, RafflePress, etc. En esta guía, cubriremos tres formas de agregar fuentes de iconos en WordPress. Puede elegir la solución que más le convenga.

Agregar fuentes de iconos en WordPress usando complementos

Si eres un usuario de nivel principiante que solo está tratando de agregar íconos a tus publicaciones o páginas, este método es para ti. No tendría que editar los archivos del tema y puede usar fuentes de iconos en todo su sitio web. Lo primero que debe hacer es instalar y activar el complemento Font Awesome 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 activa 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 como este:
[icon name=”rocket”] Puede usar este shortcode con otro texto o solo en un bloque de shortcode dedicado.

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.

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

Cuando aumenta el tamaño del texto, puede parecer extraño en el editor de texto. Esto se debe a que el código abreviado no se convierte automáticamente en una fuente de icono en el 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 ícono.

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

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 facilita el uso de 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 personalizados en WordPress sin escribir ningún código. Beaver Builder viene con hermosos íconos y módulos listos para usar que puedes simplemente arrastrar y soltar en tu publicación y páginas.

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.

Incluso puede crear temas de WordPress totalmente personalizados sin escribir ningún código utilizando el producto Themer de Beaver Builder.
Elementor Pro
Elementor es otro complemento popular de creación de páginas de WordPress. También viene con varios elementos que le permiten utilizar fuentes de iconos, incluido un elemento Icon.

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 manualmente fuentes de iconos en WordPress con código

Como mencionamos anteriormente, las fuentes de iconos son solo fuentes y se pueden agregar a su sitio como lo haría con las fuentes personalizadas. 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 descargar todo el directorio de fuentes a una carpeta en su tema de WordPress y luego usar esas fuentes en su hoja de estilo. Como 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 sitio web de Font Awesome e ingresar su dirección de correo electrónico para obtener el código de inserción.

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 incrustado en el archivo header.php de su tema de WordPress justo antes del etiqueta. Su código de inserción será una sola línea que buscará la biblioteca Font Awesome directamente desde sus servidores CDN. Se verá así: este método es el más fácil, pero puede causar conflictos con otros complementos. Un mejor enfoque sería cargar JavaScript correctamente en WordPress utilizando el mecanismo de cola incorporado. En lugar de vincular 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. función wpb_load_fa () {wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array (), ‘1.0.0’, verdadero); } 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 del icono 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.

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 a su directorio de temas 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.

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 en su tema, publicaciones o páginas de WordPress.

Visualización manual de fuentes de iconos en WordPress

Vaya al 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.

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

Puede diseñar este icono en la hoja de estilo de su tema de la siguiente manera: .fa-arrow-alt-circle-up {font-size: 50px; color: # FF6600; } También puede combinar diferentes iconos y aplicarles estilo al mismo tiempo. Por ejemplo, supongamos que desea mostrar una lista de enlaces con iconos junto a ellos. Puedes envolverlos bajo un