Cuando vemos sitios web de WordPress que usan archivos de imagen normales para sus iconos, no podemos evitar pensar que se están perdiendo algo mejor.
Eso se debe a que las fuentes de iconos son la opción más inteligente: cargan más rápido, se ven más nítidas en cualquier pantalla y puedes cambiar fácilmente su tamaño o color con solo unos pocos clics.
Muchos propietarios de sitios web todavía usan iconos de imagen anticuados porque no han oído hablar de las opciones más fáciles que existen. Gracias a las fuentes de iconos modernas, ahora puedes agregar iconos de gran apariencia a tu sitio sin ralentizarlo.
En esta guía, te mostraremos las formas más sencillas de agregar fuentes de iconos a tu tema de WordPress. Hemos probado estos métodos nosotros mismos y funcionan muy bien con cualquier tema que puedas estar usando.
¿Qué son las fuentes de iconos y por qué deberías usarlas?
Las fuentes de iconos contienen símbolos o pequeñas imágenes en lugar de letras y números.
Puedes usar estas fuentes de iconos de muchas maneras diferentes. Por ejemplo, puedes usarlas con tu carrito de compras, botones de descarga, cuadros de características, concursos de sorteos e incluso menús de navegación de WordPress.
De hecho, WordPress usa iconos de fuente en su área de administración.
La mayoría de los visitantes entenderán de inmediato lo que significa un icono de uso común, por lo que pueden hacer que tu sitio sea más fácil de navegar. También pueden ayudarte a crear un sitio web multilingüe, ya que la mayoría de las personas entenderán las fuentes de iconos comunes sin importar el idioma que hablen.
En comparación con los iconos basados en imágenes, los iconos de fuentes se cargan mucho más rápido, por lo que pueden mejorar la velocidad y el rendimiento de WordPress.
Existen varios conjuntos de fuentes de iconos de código abierto que puedes usar de forma gratuita, pero en esta guía, utilizaremos Font Awesome, ya que es el conjunto de iconos de código abierto más popular.
Dicho esto, veamos cómo puedes agregar fácilmente fuentes de iconos a tu tema de WordPress. Simplemente usa los enlaces rápidos para ir directamente al método que deseas usar:
- Método 1. Agregar fuentes de iconos usando un plugin de WordPress (gratis y fácil)
- Method 2. Using Icon Fonts with SeedProd (More Customizable)
Método 1. Agregar fuentes de iconos usando un plugin de WordPress (gratis y fácil)
La forma más fácil de agregar fuentes de iconos personalizadas a WordPress es usando el plugin Font Awesome.
Este plugin te permite usar fuentes de iconos gratuitas en tus páginas y publicaciones sin modificar los archivos de tu tema de WordPress. También obtendrás cualquier icono nuevo de Font Awesome automáticamente cada vez que actualices el plugin.
Lo primero que debes hacer es agregar Font Awesome a WordPress. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, puedes agregar un icono de Font Awesome a cualquier bloque de shortcode. Simplemente abre la página o publicación donde deseas mostrar la fuente del icono y luego haz clic en el icono '+'.
Ahora puedes buscar por ‘Shortcode’ y seleccionar el bloque correcto cuando aparezca.
Hecho esto, puedes agregar cualquier ícono de Font Awesome usando el siguiente shortcode:
[icon name="rocket"]
Simplemente reemplaza “rocket” con el nombre del ícono que deseas mostrar. Para obtener el nombre, dirígete a la biblioteca de Font Awesome y haz clic en el ícono que deseas usar.
En la ventana emergente que aparece, haz clic en el ícono.
Font Awesome ahora copiará el nombre a tu portapapeles automáticamente.
Hecho esto, simplemente pega el nombre en el shortcode. Ahora puedes hacer clic en ‘Publicar’ o ‘Actualizar’ para que la fuente de íconos esté activa.
A veces, es posible que desees mostrar una fuente de iconos dentro de un bloque de texto. Por ejemplo, podrías necesitar mostrar un símbolo de ‘copyright’ después de un nombre de marca.
Para hacer esto, simplemente pega el shortcode dentro de cualquier bloque de Párrafo.
Luego, puedes usar la configuración en el menú del lado derecho para personalizar el icono, de manera similar a como personalizas las opciones para los bloques de texto. Por ejemplo, puedes cambiar el color del texto, el tamaño de fuente y el color de fondo en WordPress.
WordPress convertirá el shortcode en un icono de Font Awesome y lo mostrará junto a tu texto.
Otra opción es agregar el shortcode a cualquier área lista para widgets.
Por ejemplo, puedes agregar un bloque de Shortcode a la barra lateral de tu sitio o a una sección similar.
Para más información, consulta nuestra guía sobre cómo usar shortcodes en los widgets de la barra lateral de WordPress.
Incluso puedes agregar el shortcode de icono a columnas y crear hermosas cajas de características.
Para instrucciones detalladas, consulta nuestra guía sobre cómo agregar cajas de características con iconos en WordPress.
Muchos sitios web utilizan fuentes de iconos en sus menús, para ayudar a los visitantes a orientarse. Para agregar un icono, crea un nuevo menú o abre uno existente en el panel de WordPress.
Para obtener instrucciones paso a paso, consulta nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.
En la página Apariencia » Menús, haz clic en ‘Opciones de pantalla’ y luego marca la casilla junto a ‘Clases CSS’.
Hecho esto, simplemente haz clic para expandir el elemento del menú donde deseas mostrar el ícono.
Ahora deberías ver un nuevo campo de ‘Clases CSS’.
Para obtener la clase CSS de un ícono, simplemente busca la fuente de íconos en el sitio web de Font Awesome y haz clic en ella. Si lo deseas, puedes cambiar el estilo del ícono haciendo clic en las diferentes configuraciones.
En la ventana emergente, verás un fragmento de código HTML. La clase CSS es simplemente el texto entre las comillas. Por ejemplo, en la siguiente imagen, la clase CSS es fa-solid fa-address-book.
Simplemente copia el texto dentro de las comillas, luego regresa al panel de WordPress.
Ahora puedes pegar el texto en el campo ‘Clases CSS’.
Para agregar más fuentes de íconos, simplemente sigue el mismo proceso descrito anteriormente.
Cuando estés satisfecho con la configuración del menú, haz clic en ‘Guardar’. Ahora, si visitas tu sitio web de WordPress, verás el menú de navegación actualizado.
Método 2. Usar fuentes de íconos con SeedProd (Más personalizable)
Si deseas la libertad de usar íconos de fuentes en cualquier lugar de tu sitio, te recomendamos usar un plugin de constructor de páginas.
SeedProd es el constructor de páginas de WordPress de arrastrar y soltar más vendido del mercado y tiene más de 1400 íconos de Font Awesome integrados. También tiene un bloque de íconos prefabricado que puedes agregar a cualquier página usando arrastrar y soltar.
Varias de nuestras marcas asociadas han creado sus sitios web completos utilizándolo y han tenido excelentes experiencias. Para más detalles, consulta nuestra reseña de SeedProd.
Lo primero que debes hacer es instalar y activar el plugin. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Nota: Existe una versión gratuita de SeedProd, pero usaremos la versión Pro ya que viene con el bloque de íconos.
Al activarla, ve a SeedProd » Ajustes e ingresa tu clave de licencia.
Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de ingresar la clave de licencia, haz clic en el botón ‘Verificar clave’.
A continuación, necesitas visitar SeedProd » Páginas y hacer clic en el botón ‘Agregar nueva página de destino’.
Ahora, puedes elegir una plantilla para usar como base para tu página. SeedProd tiene más de 350 plantillas diseñadas profesionalmente que puedes personalizar según las necesidades de tu blog o sitio web de WordPress.
Por ejemplo, puedes crear una página de destino de lista de espera viral, una página de captura o incluso una página de error 404 personalizada para mantener a los usuarios interesados.
Para seleccionar una plantilla, coloca el cursor del ratón sobre ella y luego haz clic en el icono de ‘Marca de verificación’.
Estamos usando la plantilla ‘Página de ventas de ebook’ en todas nuestras imágenes, ya que es perfecta para vender productos digitales. Sin embargo, puedes usar cualquier diseño que desees.
A continuación, escribe un nombre para la página personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiar esta URL por lo que quieras.
Cuando estés satisfecho con la información que has introducido, haz clic en el botón ‘Guardar y empezar a editar la página’.
A continuación, serás llevado al constructor de páginas de arrastrar y soltar de SeedProd, donde puedes personalizar la plantilla.
El editor de SeedProd muestra una vista previa en vivo de tu diseño a la derecha y algunas configuraciones de bloques a la izquierda.
El menú de la izquierda también tiene bloques que puedes arrastrar a tu diseño.
Puedes arrastrar y soltar bloques estándar como botones e imágenes o usar bloques avanzados como el formulario de contacto, cuenta regresiva, botones para compartir en redes sociales y más.
Para personalizar cualquier bloque, simplemente haz clic para seleccionarlo en tu diseño.
El menú de la izquierda ahora mostrará todas las configuraciones que puedes usar para personalizar ese bloque. Por ejemplo, a menudo puedes cambiar los colores de fondo, agregar imágenes de fondo o cambiar el esquema de color y las fuentes para que coincidan mejor con tu marca.
Para agregar una fuente de iconos a la página, simplemente busca el bloque 'Icono' en la columna de la izquierda y luego arrástralo a tu diseño.
SeedProd mostrará un icono de 'flecha' por defecto.
Para mostrar un icono diferente de Font Awesome en su lugar, simplemente haz clic para seleccionar el bloque de Icono.
En el menú de la izquierda, coloca el cursor sobre el icono y luego haz clic en el botón 'Biblioteca de iconos' cuando aparezca.
Ahora verás todos los diferentes iconos de Font Awesome entre los que puedes elegir.
Simplemente busca el icono de fuente que deseas usar y haz clic en él.
SeedProd ahora agregará el icono a tu diseño.
Después de elegir un icono, puedes cambiar su alineación, color y tamaño usando las configuraciones en el menú de la izquierda.
También puedes agregar un enlace al icono de fuente, escribiendo en el campo 'Enlace' en el menú de la izquierda.
Otra opción es usar la Caja de Iconos lista para usar de SeedProd.
Esto te permite escribir algo de texto y luego mostrar un icono de fuente junto a él, lo que lo convierte en una excelente opción para las cajas de características.
Simplemente busca la Caja de Iconos en el menú de la izquierda y arrástrala a tu diseño.
Luego puedes hacer clic para seleccionar el bloque y cambiar el icono siguiendo el mismo proceso descrito anteriormente.
Después de eso, puedes escribir el texto del encabezado y del cuerpo.
También puedes cambiar el relleno y margen del bloque, agregar animaciones CSS y más seleccionando la pestaña ‘Avanzado’.
Puedes continuar trabajando en la página agregando más bloques y personalizando esos bloques en el menú de la izquierda.
Cuando estés satisfecho con el aspecto de la página, haz clic en el botón ‘Guardar’. Luego puedes seleccionar ‘Publicar’ para que esa página esté activa.
Alternativa: Usa íconos SVG
Otra forma de agregar imágenes de íconos a WordPress es usando íconos SVG. Abreviatura de formato vectorial escalable, es un formato de imagen comúnmente utilizado para gráficos vectoriales.
Muchas personas usan íconos vectoriales SVG en lugar de fuentes de íconos cuando quieren agregar varios colores a sus íconos. Estos archivos también son conocidos por ser más amigables con el SEO y requieren menos solicitudes al servidor para cargarse que otros íconos de imagen.
Si deseas obtener más información sobre SVG, puedes consultar nuestra guía paso a paso sobre cómo agregar archivos de imagen SVG en WordPress.
Esperamos que este tutorial te haya ayudado a aprender cómo agregar fuentes de íconos a tu tema de WordPress. También puedes consultar nuestra guía sobre los mejores constructores de temas de WordPress y cómo cambiar las fuentes en tu tema de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Shraddha Patil
¡Muy útil! Estaba buscando este tipo de soluciones. Me alegra haberlo encontrado aquí. ¡Gracias!
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Juan
Hola, muchas gracias por tan buena explicación.
Pero no entiendo algo.
En la función wp_enqueue_style(), el primer parámetro es una cadena llamada ‘wpb-fa’. Busqué en la documentación y se supone que es el nombre de la hoja de estilos. Pero no entiendo. ¿Para qué es este nombre? ¿Es obligatorio que se llame así en este caso? ¿La hoja de estilos no se llama “style.css”?
Perdón por las preguntas de novato.
Gracias
Soporte de WPBeginner
wpb-fa es el nombre único para el script, esa sección no es para el nombre de la hoja de estilos
Administrador
M. Hridoy
Hola,
¡Esto es genial! Gracias por tu increíble y valioso post que vale la pena leer. De hecho, es un post oportuno y útil del que pude obtener información valiosa sobre este tema. Sigue actualizándonos con nuevas sugerencias…
Soporte de WPBeginner
Thank you and you’re welcome
Administrador
drkumar kumar
buen artículo, gracias por compartir
Soporte de WPBeginner
Thank you, glad you liked our article
Administrador
Niranjan G Vala
Hola equipo de soporte para principiantes de wp, soy un diseñador web con discapacidad visual.
He leído este artículo completo pero aún quiero algo de ayuda con respecto a la integración de iconos de fuente en mi sitio web.
Quiero usar Font Awesome con mi tema. y ya seguí los pasos proporcionados anteriormente en el artículo.
Los iconos funcionan bien en publicaciones y páginas, pero quiero usarlos en los menús.
Aquí está lo que he hecho con CSS.
.shoppingcart::before { font-family: FontAwesome; content: "\f07a"; color: #ffffff; }
Pero todavía no funcionó. Entonces, ¿qué hice mal?
Por favor, ayúdenme a salir de este problema.
Siempre lo agradeceré.
Muchas gracias a todos en wp beginners.
Soporte de WPBeginner
Hola Niranjan,
Una forma más fácil de agregar Font Awesome es añadir sus clases CSS a los elementos de menú individuales. Después de incluir la hoja de estilos de fuentes.
Ve a la página Apariencia » Menús y haz clic en el botón Opciones de pantalla. Desde allí, asegúrate de que la casilla Clases CSS esté marcada.
A continuación, haz clic para expandir un elemento de menú individual y notarás la opción para agregar clases CSS. Cada icono de font-awesome tiene su propia clase CSS, por ejemplo, las clases CSS fa fa-lg fa-home se usarán para el icono de inicio. Puedes encontrarlas todas en el sitio web de Font Awesome.
Después de agregar la clase CSS, puedes usar esas clases en tu CSS personalizado para estilizar los iconos.
Administrador
Niranjan G Vala
Primero, gracias a todos en WP Beginners por su valiosa respuesta. Y disculpen la demora en mi retroalimentación. Desafortunadamente, no pude responder rápidamente porque el correo estaba en la carpeta de spam. Ahora funciona bien y puedo usar Font Awesome en los menús de navegación.
Una sugerencia es que por favor mencionen el nivel de accesibilidad de los plugins/temas cuando publiquen un artículo. El núcleo de WordPress es completamente accesible, pero el 60% de los plugins y temas no siguen las pautas de accesibilidad web (WCAG 2.0), que es la recomendación del consorcio mundial de la web (w3.org). O por favor agreguen enlaces de omisión en su sitio web para una mejor accesibilidad. Hacer que los sitios web sean accesibles ayudará mucho a las personas con discapacidades como yo a navegar por el sitio web con mucha más facilidad. Gracias.
ripon
en un sitio web debería haber un icono de font awesome. Quiero hacerlo dinámico. Quiero cambiar ese icono desde el panel de control de wordpress. como en la sección 'por qué elegirnos' debería haber un icono de diseño receptivo. Quiero cambiar eso desde la opción del tema de wordpress.
Tobias
Hola, ¡excelente tutorial, gracias!
¿Me puedes ayudar?
Usé esta línea de código “-o-transform: scale(1);” para escalar mis íconos en Opera correctamente, sin embargo, no me ayudó. Quizás se deba específicamente a estos íconos que estoy usando –
¿Es posible que algo esté mal con ellos? ¿Qué opinas? ¡Y gracias por tu tutorial!
valldahi
Muchas gracias Isy. método 1
Nrusingh Pr Acharya
Gracias por este método. Inserté FA manualmente porque Better ya no tiene soporte con WP v4.7.
He estado siguiendo tus tutoriales desde el principio, y ahora tengo bastante confianza en Wordpress. Gracias.
zeniwo
Un artículo muy informativo, realmente me ayudó a aclarar mis dudas sobre cómo agregar fuentes de iconos en temas de WordPress. Blogueros como tú ayudan a cientos de blogueros nuevos y en ciernes como yo a entender las cosas y seguir adelante. Muchas gracias por este útil artículo.
Soporte de WPBeginner
Glad you found it helpful
Administrador
Rhonda
¡Gracias! He estado tratando de entender cómo usar las fuentes de iconos y esto fue directo y útil.
Soporte de WPBeginner
Glad you found it helpful
Administrador
Kobe
Gracias por esta publicación. Fue realmente útil. He estado usando el plugin Better Fonts Awesome y me ayudó mucho. Pero luego necesité formar mi contenido en columnas responsivas y comencé a buscar un plugin que me permitiera hacer eso. Accidentalmente me encontré con MotoPress Editor. En realidad, no me gustan los editores visuales debido a la dependencia de ellos, pero me salvó, ya que pude formar las columnas visualmente y usar Font Awesome Icons, seleccionando tamaños y colores fácilmente. Gracias de nuevo por el buen trabajo.