Saltar al contenido

Íconos en el Footer con FontAwesome

marzo 20, 2019
iconos en el footer orbital theme

Bienvenidos amantes del SEO, en esta oportunidad utilizaremos la librería de FontAwesome para agregar íconos a nuestro pie de página.

Lo puedes utilizar para agregar las tarjetas de crédito que aceptas ó los logos de amazon en tu Orbital Theme 2019. Comprobado y funcionando en la versión 2.1.4

Comencemos; dirígete a /Apariencia/Widgets/ en la parte derecha se encuentran las “zonas” del footer donde podemos agregar widgets.

Este ejemplo lo haré en la zona 4 pero tú podrás hacerlo en la que gustes. Agrega un widget de tipo “Texto” y modifica el html con el siguiente código:

<span class=”tarjetas”>ACEPTAMOS:</span>

Guarda, del código previo puedes modificar la clase “tarjetas” recordando cambiarlo también en el código css que veremos más adelante. El texto “ACEPTAMOS” es el que aparecerá a los usuarios.

Avancemos, busca el menú /Apariencia/Personalizar/ y abre el /CSS/Adicional/ y pega el siguiente código CSS:

.tarjetas::after{
content: “\f1ed \f24c \f1f3”;
font-family: FontAwesome;
font-size:2em;
display:inline-block;
width: 100%;
color: black;
}

Solo te queda modificar el unicode, abre FontAwesome y busca el ícono que necesites. Copia el unicode y pégalo después de backslash ( \ ).

Para modificar el color puedes utilizar el código de colores que compartí en otro video aquí. Y el tamaño del “ícono” modifícalo variando el font-size.

Como material extra te cuento como ocultar los créditos conocida también como “descripción corta”, en el /CSS/Adicional/ pega el siguiente código:

.site-footer .credits{
display:none;
}

Espero te haya gustado esta nueva entrega y te recuerdo que puedes obtener un backlink gratis y dofollow. Dale clic Quiero mi backlink Gratis para conocer más.

Christian E. Muñoz

Me gustan las computadoras, el Marketing, Internet y nuevas tecnologías.
¡Vamos lo que se llama un geek!