Como agregar iconos de redes sociales en blogger con FontAwesome

¿Como agregar iconos de redes sociales a tu blog en blogger ? Una de las soluciones actuales  y recomendada por la mayoría de diseñadores profesionales es FontAwesome.

Hace poco, uno de nuestros lectores nos preguntó cómo agregar Font Awesome en Blogger, para agregar iconos vectoriales escalables en su sitio web sin que sus píxeles se vean borrosos. Font Awesome proporciona una técnica simple de CSS que agrega iconos vectoriales que se ven increíbles en cualquier tamaño.

¿Qué es Font Awesome?

Font Awesome ofrece una amplia gama (más de 600) de iconos vectoriales escalables de alta calidad, que se pueden usar fácilmente en tu blog y personalizar mediante CSS.  Al ser un diseñador web, es posible que necesites una gran variedad de iconos diferentes para darle a su diseño un toque profesional y al mismo tiempo mantener los últimos estándares en desarrollo web.

Por qué usar Font Awesome en blogger

Las ventajas de utilizar Font Awesome son innumerables, pero en el siguiente lista mostraremos solos las más destacadas:

  • Amplia gama de iconos:  proporciona una agran variedad de iconos de vectores de alta calidad e imágenes nítidas.
  • Admite CSS: también funciona con CSS para que los colores, el tamaño, las sombras y otros componentes se puedan editar y aplicar cambios fácilmente.
  • Velocidad: Las imágenes de Font Awesome son extremadamente livianas y se cargan muy rápido en comparación con las imágenes CSS Spirit .
  • Flexibilidad: existen muchas maneras diferentes de agregar y utilizar Font Awesome en su sitio para mejorar su rendimiento y apariencia.
  • Innovación: el equipo detrás de esta increíble herramienta es altamente talentoso y trabajan continuamente para hacerlo aún mejor.
  • Completamente gratuito: puede obtener este recurso completamente gratis.

En este artículo, le mostraremos cómo agregar correctamente los iconos de Font Awesome en Blogger.

Instalar Font Awesome en blogger

La forma correcta de añadir Font Awesome en blogger, sin compremeter el tiempo de carga de su sitio, es agregarlo justo después de la etiqueta <head>; . Por lo tanto, vaya a Blogger >> Plantilla >> Editar HTML y busque la etiqueta <head>, justo debajo de ella pegue la siguiente línea de código

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>

Añadir iconos en Blogger

Ahora que Font Awesome está instalado, podemos añadir íconos sociales en nuestro blog para mostrarlos en nuestras publicaciones, barra lateral, menú de navegación, botones, etc. Para hacerlo, utilizamos una línea simple de código en nuestro HTML.

Visite la página de iconos de Font Awesome y haga clic en el icono que desea utilizar. En la página del icono elegido, verá un código parecido al que mostrare a continuación. En este caso yo usare un icono de Facebook Messenger.

Iconos FontAwesome

Nota: Use el buscador para encontrar iconos de Twitter, pinterest, instagran entre otras redes sociales.

<i class="fab fa-facebook-messenger"></i>

Copia este código y pegalo en donde desees mostrar el ícono; puede ser una publicación, una página, barra lateral, navegación o cualquier otro lugar que acepte HTML.

Para hacer que el ícono sea un enlace cliqueable, podemos envolverlo entre etiquetas de enlace como se muestra a continuación.

<a href="URL" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook-messenger" aria-hidden="true"></i></a>

Aplicar CSS a los iconos

Puede editar el color, el tamaño, la sombra y más aplicando CSS a sus iconos.El método es bastante directo y se logra a través de la clase dada a su ícono.Mira el siguiente ejemplo:


.fa-facebook-messenger {
   font-size:40px;
   font-weight:bold;
   color:#111;
   border:1px solid #111;
   padding:12px;
   float:left;
}

Conclusión

Si todavía tiene dudas de como añadir Font Awesome a su blog,  puede echar un vistazo a la página de ejemplos que proporciona una guía detallada tanto para diseñadores como para aficionados al blogging, la guía esta en ingles, pero para eso existe el traductor. Ejemplos Font Awesome.

Font Awesome es una forma fantástica, flexible y rápida de agregar vectores gráficos de calidad a tu sitio de blogger.  Esperamos que este artículo te haya ayudado a aprender cómo agregar correctamente iconos increíbles en blogger. Comparte tus dudas o recomendaciones en la sección de comentarios.

Relacionados