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

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

Usar fuentes de íconos con cualquier tema de WordPress

¿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 mediante CSS. En comparación con los iconos basados ​​en imágenes, los iconos de fuente 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 usar para mostrar iconos de uso común. Por ejemplo, puede usarlos con su carrito de compras, botones de descarga, cuadros de características, concurso de regalos e incluso en los menús de navegación de WordPress.

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

De hecho, cada instalación de WordPress viene con el conjunto de fuentes de íconos dashicons gratis. Estos íconos se usan 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:

  • Font Awesome
  • Genéricos
  • IcoMoon
  • Linearicons
  • Iconos de materiales de Google
  • El proyecto sustantivo

Por el bien de este tutorial, utilizaremos Font Awesome. Es la fuente de icono de código abierto y gratuita más popular disponible. Usamos FontAwesome en el sitio web de WPBeginner, 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 mejor funcione para usted.

Agregar fuentes de iconos en WordPress usando complementos

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

Lo primero que debe hacer es instalar y activar el plugin 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 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 abreviado de icono como este:

(nombre del icono = "cohete")

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

Agregar código 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 icono 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í mismo donde puede usar la configuración del bloque para aumentar el tamaño del icono.

Aumentar el tamaño del ícono

A medida que aumenta el tamaño del texto, esto puede parecer extraño dentro del editor de texto. Esto se debe a que el shortcode 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 shortcode de icono dentro de las columnas y crear cuadros de características como este:

Usar fuentes de íconos en cuadros de características

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

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

Beaver Builder

Beaver Builder es el mejor complemento de generador de páginas de WordPress en el 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 tus publicaciones y páginas.

Módulos de icono 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 con el producto Themer de Beaver Builder.

Elementor Pro

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

Icono Elementor

Simplemente puede 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 íconos son solo fuentes y se pueden agregar a su sitio como si agregara cualquier fuente personalizada.

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

También puede cargar 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 fácil.

Primero, debe visitar el sitio web Font Awesome e ingresar su dirección de correo electrónico para obtener el código de inserción.

Obtener código de inserción de Font Awesome

Ahora revise su bandeja de entrada para 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 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á algo como esto:


Este método es 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 del ícono Font Awesome en su propio sitio web.

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

Descarga la fuente del icono a tu computadora

Simplemente descargue las fuentes del icono 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.

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

Subir fuentes de íconos 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' );

Has cargado correctamente Font Awesome en tu 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

Vaya al sitio web de Font Awesome para ver la lista completa de iconos disponibles. Haga clic en cualquier ícono que desee usar y podrá ver el nombre del ícono.

Nombre icónico

Copie el nombre del icono y úselo de esta manera en WordPress.

 

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 íconos y diseñarlos a la vez. Por ejemplo, supongamos que desea mostrar una lista de enlaces con iconos junto a ellos. Puedes envolverlos debajo de un

elemento con una clase específica.

Home Library Applications Settings

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 te haya ayudado a aprender cómo agregar fácilmente fuentes de íconos en tu tema de WordPress. También puede consultar nuestro tutorial sobre cómo agregar iconos de imágenes con menús de navegación en WordPress.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba