La mayoría de los sitios de WordPress parecen poco profesionales cuando dependen de archivos de imagen borrosos para los iconos de redes sociales. La mejor solución es añadir Font Awesome a WordPress, lo que te proporciona iconos nítidos y escalables que se actualizan en segundos.
En esta guía, te mostraré paso a paso cómo configurarlo para que puedas obtener iconos nítidos y profesionales en tu sitio sin la frustración habitual.
Pasos rápidos para añadir iconos personalizables de Font Awesome a WordPress:
¿Qué es Font Awesome y por qué usarlo?
Font Awesome es una enorme biblioteca de iconos con miles de diseños listos para usar, desde logotipos de redes sociales hasta flechas e iconos de navegación. En lugar de subir archivos de imagen voluminosos, puedes insertar un icono nítido y escalable que siempre se ve bien.
La biblioteca tiene más de 7000 iconos y, como están basados en vectores, se redimensionan sin perder calidad. Eso los hace de carga rápida, ligeros y perfectos para mantener tu sitio de WordPress rápido.
También funcionan en todos los navegadores y dispositivos modernos, por lo que tu sitio se ve consistente en todas partes. Además, puedes ajustar fácilmente el color, el tamaño y el estilo para que coincidan con el diseño de tu marca.
A continuación, veamos cómo añadir Font Awesome a tu tema de WordPress.
Método personalizable: Añadir Font Awesome con SeedProd
Usaremos SeedProd para el primer método porque te da más libertad sobre dónde puedes usar iconos de fuentes en tu sitio web.
SeedProd es el mejor constructor de páginas de WordPress de arrastrar y soltar del mercado. No solo tiene más de 1400 iconos de Font Awesome integrados, sino que también viene con una caja de iconos que puedes añadir a cualquier página sin escribir código HTML o clases CSS.
Con SeedProd, puedes crear temas personalizados de WordPress, páginas de destino, encabezados, pies de página o barras laterales y usar iconos de Font Awesome en cualquier lugar de esos diseños con arrastrar y soltar.
Sigue los sencillos pasos a continuación para añadir fuentes de iconos a WordPress con SeedProd.
Paso 1. Instalar y Activar SeedProd
Lo primero que necesitarás hacer es instalar y activar SeedProd en tu sitio web de WordPress. Aunque existe una versión gratuita de SeedProd, usaremos la versión pro para esta guía porque incluye la función de caja de iconos.
Para más detalles, puedes ver esta guía para principiantes sobre cómo instalar un plugin de WordPress.
Después de instalar el plugin, ve a SeedProd » Ajustes e introduce tu clave de licencia del plugin.
Puedes encontrar tu clave de licencia en tu cuenta en el sitio web de SeedProd en la sección de Descargas.
Después de pegar tu clave de licencia, haz clic en el botón Verificar clave.
A continuación, visita SeedProd » Páginas desde tu administrador de WordPress y haz clic en el botón Añadir nueva página de destino.
Paso 2. Elegir una Plantilla Prediseñada
En la siguiente pantalla, puedes elegir una plantilla para usar como punto de partida para tu página. Con más de 180 plantillas diseñadas profesionalmente, puedes personalizar cualquier diseño para adaptarlo a las necesidades de tu sitio web.
Consejo profesional: También puedes usar la función de creador de temas de SeedProd para crear un tema personalizado de WordPress desde cero utilizando la misma funcionalidad de creador de páginas.
Para elegir una plantilla, pasa el ratón sobre la miniatura y haz clic en el icono de la ‘Marca de verificación’.
Para este tutorial, usaremos la plantilla de página de ventas de eBook, sin embargo, puedes usar cualquier diseño que desees.
Después de elegir tu plantilla, puedes darle un nombre a tu página. El plugin generará automáticamente una URL basada en el título que introduzcas, pero puedes cambiarla en cualquier momento en la página de Configuración.
Cuando estés satisfecho con el nombre y la URL de tu página, haz clic en el botón Guardar y empezar a editar la página.
Después de hacer clic en el botón, accederás al creador de páginas de SeedProd, donde podrás personalizar tu diseño.
Paso 3. Añadir iconos de Font Awesome
El editor de arrastrar y soltar de SeedProd mostrará una vista previa en vivo de tu página a la derecha y varios bloques y configuraciones a la izquierda.
Desde el menú de la izquierda, puedes arrastrar nuevos bloques de contenido a tu diseño, como temporizadores, botones para compartir en redes sociales, formularios de contacto y más.
Para personalizar un bloque que tu plantilla ya está utilizando, haz clic en él y verás su configuración de personalización en la barra lateral izquierda.
Por ejemplo, puedes cambiar el contenido y los colores de un bloque, añadir imágenes de fondo o cambiar la combinación de colores y las fuentes para que coincidan mejor con tu marca.
Para añadir fuentes de iconos de Font Awesome a tu página, busca el bloque ‘Icono’ en la columna de la izquierda y arrástralo a tu diseño.
Verás un icono de ‘Flecha’ por defecto, pero puedes hacer clic en él para cambiarlo por un icono de Font Awesome mejor que se ajuste a tus necesidades.
Con el bloque de iconos seleccionado, ve al panel de configuración, pasa el ratón sobre el botón ‘Biblioteca de iconos’ y haz clic en él.
Ahora verás una biblioteca de diferentes iconos de Font Awesome que puedes usar. Simplemente desplázate por la biblioteca o escribe el nombre de un icono específico en el cuadro de búsqueda para encontrar la fuente de icono que necesitas.
Desde allí, haz clic en él y SeedProd lo añadirá a tu diseño.
Después de seleccionar un icono, puedes personalizar el color, el tamaño, la alineación y el enlace del icono.
Alternativamente, puedes usar la Caja de iconos de SeedProd para añadir iconos de fuentes con un encabezado y una descripción. Puedes personalizar el bloque de la misma manera que el bloque de iconos, pero también incluir información adicional para tus visitantes.
Continúa trabajando en tu página hasta que estés satisfecho con cómo se ve todo.
Aquí tienes otras formas de usar SeedProd para añadir fuentes de iconos dentro de tu tema de WordPress:
Usa el bloque de Perfiles Sociales para añadir iconos personalizados de redes sociales a tu sitio web.
Personaliza tu encabezado y usa el bloque de Carrito de Menú para añadir un elemento de menú de carrito de compras a tu tienda online.
Paso 4. Publica tus cambios
Cuando estés satisfecho con tu página, haz clic en el botón Guardar del constructor de páginas y luego selecciona ‘Publicar’ para que tu página esté activa en tu sitio de WordPress.
Desde allí, puedes visitar tu nueva página para ver cómo queda.
Método alternativo: Usar el plugin Font Awesome
Otra forma de añadir fuentes de iconos a tu sitio web es con el plugin de WordPress Font Awesome. Con este método, puedes usar fuentes de iconos en tus publicaciones y páginas, pero no tendrás el mismo nivel de control y personalización que con el primer método.
Dicho esto, es una gran solución si quieres usar algo más que un plugin de constructor de páginas.
Para empezar, descarga la última versión de Font Awesome del repositorio de plugins de WordPress y actívala en tu sitio web.
Después de activar el plugin, puedes crear o editar cualquier publicación o página y usar el bloque Shortcode de WordPress para añadir el shortcode de icono de Font Awesome.
Simplemente haz clic en el icono ‘+’ y busca ‘Shortcode’, luego haz clic en él cuando aparezca el bloque.
Una vez hecho esto, puedes añadir cualquier icono copiando y pegando el siguiente fragmento de shortcode:
[icon name= "rocket"]
Todo lo que necesitas hacer es reemplazar “rocket” con el nombre del icono que deseas mostrar. Para obtener el nombre del icono, visita la CDN del sitio web de Font Awesome: fontawesome.com/icons y haz clic en el icono gratuito que desees usar.
Desde allí, copia el nombre del icono para guardarlo en tu portapapeles.
Ahora puedes pegar el nombre en el bloque de shortcode y hacer clic en Publicar para que tus cambios estén activos.
Ahora puedes visitar tu publicación para ver el icono en acción.
Preguntas frecuentes sobre cómo añadir Font Awesome a WordPress
functions.php o enlazando al CDN.[icon name="coffee"], o pegando HTML como <i class="fas fa-coffee"></i>. Cada método funciona en los editores modernos de WordPress y se puede estilizar con clases CSS.fa-2x para iconos más grandes o fa-spin para efectos de rotación.Espero que esta guía te haya ayudado a aprender cómo añadir Font Awesome en WordPress de forma rápida y sencilla. Antes de irte, también puede que disfrutes de esta guía sobre cómo editar un menú en WordPress para personalizar los elementos de tu menú.
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
