Cómo implementar iconos en Plantillas Blogger (Font Awesome)

Recursos Blogger

Cómo Implementar Iconos de Font Awesome en Plantillas Blogger

Aprende a integrar la biblioteca de iconos más popular de la web en tu blog para mejorar la apariencia y el diseño de tus entradas y plantillas

Cómo implementar iconos en Plantillas Blogger

📋 En este artículo aprenderás:

1. Qué es Font Awesome y por qué usarlo
2. Pasos para instalar la biblioteca y usar iconos
3. Preguntas Frecuentes

1. ¿Qué es Font Awesome y para qué sirve?

Font Awesome es un conjunto de herramientas de fuentes e íconos basado en CSS. En la actualidad la mayor cantidad de sitios web lo utilizan en sus diseños de plantillas. Es la biblioteca líder de internet para mejorar la apariencia visual de tu blog, empleada por millones de diseñadores, desarrolladores y creadores de contenido.

Para insertar iconos en tu diseño en Blogger, implementaremos una biblioteca CSS gratuita y actualizada de Font Awesome con los elementos más usados, listos para personalizarse con CSS básico.

💡 CONSEJO CLAVE

El uso de iconos vectoriales en lugar de imágenes reduce significativamente el peso de carga de tu página, mejorando el rendimiento en Google PageSpeed.

2. Cómo implementar iconos en tu Blog paso a paso

Sigue los siguientes métodos para enlazar la biblioteca y mostrarlos tanto en tus entradas como en el diseño general de la plantilla.

PASO 1

Enlazar en el Head

Agrega el enlace CDN de Font Awesome en la cabecera HTML de tu plantilla de Blogger.

PASO 2

Usar en Entradas

Inserta etiquetas HTML con las clases correspondientes en la Vista HTML de tus posts.

Paso 1: Agregar el CDN en el código fuente

Entra a Blogger en Tema > Editar HTML, busca la etiqueta de cierre </head> y pega justo arriba el siguiente código:

<!-- Font Awesome Gratuito y Optimizado -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Paso 2: Mostrar iconos en las entradas

Para mostrar iconos en tus artículos o páginas, utiliza el código fuente en la sección Vista HTML:

<i class="fa-solid fa-user"></i>

Paso 3: Usar códigos UNICODE en el CSS de la plantilla

Si deseas colocar o cambiar iconos en partes fijas de tu diseño (como menús, botones o títulos de widgets), puedes emplear el código Unicode dentro del CSS de tu plantilla:

/* Ejemplo de uso Unicode en CSS */
.mi-elemento::before {
  content: "\f007"; /* Código Unicode para icono de usuario */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

⚠️ ADVERTENCIA IMPORTANTE

Asegúrate de no duplicar la biblioteca Font Awesome en tu plantilla si tu tema ya la incluye, ya que esto podría generar conflictos de versiones o ralentizar la carga.