¿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.
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:
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.
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 párrafo por sí solo, donde puede usar la configuración del bloque para 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.
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 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.
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 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.
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.
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.
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.
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.
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
<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.
