Saltar al contenido

Íconos en el Footer con FontAwesome

20/03/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 2020. Comprobado y funcionando en la versión 2.3.2

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!

5/5 (1 Review)