Como poner iconos flotantes de redes sociales en nuestra web con html y css

Poner los iconos de redes sociales en una página web con html y css es fácil si se domina el concepto del posicionamiento fijo.

Sin embargo tarde o temprano todos terminamos haciendo esta búsqueda en google para ahorrarnos tiempo.

Hay varios conceptos que debes dominar para hacer correctamente el ejercicio que se presenta en esta publicación.

• Posicionamiento fijo de cajas.
• Posicionamiento relativo y absoluto de cajas.
• Diferencia en el posicionamiento de cajas con y sin floats.
• Centrado vertical de cajas.

En esta entrada te puedes documentar sobre todos los puntos anteriores.

Pasemos al planteamiento y resolución del ejercicio.

Enunciado

Haz un documento web con suficiente texto como para que se pueda hacer scroll en tu navegador web.

Centrado verticalmente coloca un contenedor con las imágenes de las redes sociales facebook, youtube, linkedin e instagram.

Por ejemplo puedes encontrar estas imágenes en iconfinder.com

Solución del ejercicio

El error típico cuando resuelves este ejercicio es dar posicionamiento fixed a las imágenes. Por este motivo es probable que se te hayan superpuesto todas las imágenes unas encima de otras.

En su lugar la solución correcta pasa por poner todas las imágenes dentro de un contenedor y darle a este el position:fixed;

Como consideración importante las imágenes que se han utilizado son de dimensiones 48px de ancho por 48px de alto. (También puedes forzarlo con css).

Veamos el código solución.[vc_custom_heading text=»Código html» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<div class="container">
		<!-- (p>lorem)*20 (código a usar si tienes instalada la extensión emmet)-->
	</div>

	<div class="social">
		<a href="#"><img src="img/facebook.png" alt="facebook"></a>
		<a href="#"><img src="img/youtube.png" alt="youtube"></a>
		<a href="#"><img src="img/linkedin.png" alt="linkedin"></a>
		<a href="#"><img src="img/instagram.png" alt="instagram"></a>
	</div>

[vc_custom_heading text=»Código css» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

*{box-sizing:border-box;}

		.container{
			width:95%;
			max-width:900px;
			padding:32px 64px;
			margin:auto;
		}

		.social{
			/*las imágenes usadas tienen width de 48px*/
			width:48px;
			position:fixed;
			top:50px;
			right:0;
		}

		/* Extra centrado vertical*/

		.social{
			/*border:1px solid #000;*/
			top:50%;
			height:205px;
			/*para poner height 192 deberíamos haber indicado en el reset de estilos font-size:0;*/
			margin-top:-100px;
		}

Si juntamos todas las piezas resolvemos el ejercicio.¡Hola!

Querido lector,

Posicionar imágenes flotantes en un proyecto web no es complicado. Sólo hay que entender el posicionamiento fijo.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!