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.

Mira más contenido relacionado

Programando a tu whatsapp bot en Android

por Manuel Zambrano Spicer, octubre 29, 2018

A día de hoy, la famosa App cuenta con 1200 millones de usuarios activos que no paran...

¿Qué plataformas de medios sociales debería usar mi Mype?

por Jhon Torres, octubre 1, 2018

Los medios sociales han demostrado ser una de las mejores herramientas de marketing...

Cómo sobrevive una pequeña empresa sin redes sociales en el siglo XXI

por Jhon Torres, septiembre 25, 2018

¿Podría su pequeña empresa sobrevivir sin las redes sociales?  la respuesta corta es...

Cómo diseñar una imagen con Canva

por Manuel Zambrano Spicer, septiembre 12, 2018

Que tal, hace un tiempo atrás vengo utilizando el diseñador de imágenes en linea...

Como agregar paginación numerada en blogger

por Jhon Torres, septiembre 10, 2018

La paginación estándar de Blogger le permite a los lectores mostrar enlaces de...

Skype 8.0 finalmente agrega la función para grabar llamadas

por Jhon Torres, septiembre 5, 2018

En julio, Microsoft confirmo que añadiría la grabación de llamadas nativas a...