Barra social

1. Organizar el proyecto en una carpeta y generar:
2. -archivo .html !
3. -archivo .css

Se extraen los achivos
font y style.css

Luego lo que haces es enlazar con el archivo css.

Extraemos los archivos font y style.css

Cambiamos el nombre del
archivo styles para evitar
confusiones

Agregamos cada uno de los elemento que escogimos de
icomoon

Esta es la apariencia en el navegador

Ya en el css
lo que
hacemos es
quitar los
valores del
margen para
después
aplicarlos.

Lo que
hacemos es
posicionarlo a
un lado y que
quede ﬁjo a la
margen.

Se agrega z-
index que me
permite dejar
el elemento
en primer
plano y que
ningún otro
elemento lo
interﬁera.

Empezamos a dar
la apariencia a las
listas.

Debemos colocar
color de fondo a
cada ítem.

Se agrega
un padding
y el color
de fondo
que
queremos
para
cuando el
icono
cambie.

Para la
animación
debemos
ir al
siguiente
elemento:

Acá se le da el
tiempo de
transición la
animación.

Más contenido relacionado