Cómo instalar iconos Font Awesome en Blogger

Ya todos sabemos lo importante que es el aspecto visual de nuestro blog y también sabemos que agregar iconos para hacer aún más fácil la navegación de nuestro blog es super importante. Los usuarios encuentran más rápido el contenido gracias a los iconos, relación una sección de contacto con el icono de burbuja o pueden encontrar tus redes sociales con los iconos de facebook, intagram, y más.

Así que hoy veremos cómo instalar iconos en nuestro Blogger y personalizarlos a tu gusto con Font Awesome. Esta herramienta nos ofrece iconos desde los más simples y comunes como iconos de flechas, iconos de contacto hasta una colección de iconos de marcas o redes sociales como Instagram, Adobe, Amazon Github y mucho más.

Instalar iconos en Blogger

Lo primero que debemos hacer es entrar al panel de nuestro blog y entrar en Tema > Editar HTML. Una vez dentro del editor de HTML buscamos la etiqueta </head> y justo encima de ella pegamos el siguiente código:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

Con este línea de código ya tendríamos instalado los iconos de Font Awesome en nuestro blog.

Cómo usar iconos Font Awesome en nuestro Blog

Para poder usar los iconos de Font Awesome en Blogger debemos de dirigirnos a la líbreria de iconos. En esta página veremos una gran variedad de iconos que podemos usar, encontraremos iconos de diferentes tipos para Blogger o podremos usar su buscador directamente para encontrar alguno en específico.

En la librería vamos a localizar algun icono que nos sea de utilidad para agregarlo en nuestro blog. Como mencione antes podemos usar el buscador o o también usar las categorias que nos ofrece Font Awesome.

Una vez encontrado el icono que queremos usar en nuestro blog, daremos click sobre el icono y nos saldrá una página donde tendremos información sobre el icono selecionado. Lo importante es donde aparece la línea de código HTML, le daremos click para copiarlo.

Ahora que ya tenemos copiado el codigo del icono podemos usarlo en cualquier parte de nuestro blog, ya sea en un gadget o alguna publicación para dar un mejor aspecto a nuestro blog.

Personalizar iconos de Font Awesome en Blogger

Una vez que ya tenemos nuestro iconos instalados y hemos usado alguno en nuestro blog podemos empezar a personalizarlos. En esta parte no hay límite ya que puedes darle el aspecto que quieras desde cambiarle el color hasta darle la forma de un botón. Te voy a mostrar lo más básico que podemos hacer para que así tu puedas luego jugar un poco con los estilos CSS

Por ejemplo vamos a aplicar un color rojo y una tamaño de letra al icono del ejemplo anterior el cual es el siguiente:

<i class="fab fa-youtube"></i>

Para poder personalizar cualquier icono de Font Awesome debemos de fijarnos en las clases que tiene el icono. Todos los iconos siempre tienen dos clases y son las siguientes:

En la segunda clase la parte donde dice {variante} cambia dependiendo de cada icono. Como explico es una clase única para cada icono.

A nosotros nos interesa esta clase la cual nos va a permitir personalizar el icono. En nuestro ejemplo vemos que la segunda clase es fa-youtube.

Entonces para cambiarle el color y tamaño al icono vamos a aplicar a esa clase la propiedad color y font-size.

.fa-youtube {
  color: red;
  font-size: 30px;
}

El resultado seria el siguiente:

Como ves no es nada complicado poder personalizar los iconos en Blogger, solo es saber que propiedad agregarle para poder darle un estilo único.