CursosEmpresasBlogLiveConfPrecios

Contenido del curso

Sitios Code con HTML y CSS

Tomar examen

Colorea iconos sociales con Flexbox

Resumen

Estilizar iconos de redes sociales con CSS3 y Flexbox es el último paso para terminar tu carta de presentación web. Aquí aprendes a centrar elementos, ajustar cajas, eliminar viñetas de listas y aplicar colores corporativos usando solo HTML5 y CSS3, ideal si estás dando tus primeros pasos en desarrollo frontend.

¿Por qué configurar el viewport en HTML antes de estilizar?

Antes de tocar los iconos, hay un detalle que decide si tu página se verá bien en móviles o no: la etiqueta viewport.

Cuando abres la vista de dispositivos móviles en Chrome y notas que el texto se ve más pequeño o desproporcionado, casi siempre falta esta línea dentro del <head>:

html <meta name="viewport" content="width=device-width, initial-scale=1.0">

Con width=device-width le dices al navegador que el ancho del viewport iguale el ancho real del dispositivo, y con initial-scale=1.0 defines una escala normal sin zoom. Es una etiqueta que vas a usar casi siempre, así que vale la pena memorizarla [02:10].

¿Qué es el viewport en HTML? Es la meta etiqueta que le indica al navegador cómo ajustar el ancho y la escala de tu página según el dispositivo. Sin ella, los textos y elementos se ven mal en móviles.

¿Cómo centrar iconos sociales con Flexbox?

Una vez resuelto el viewport, llega el turno de tu lista de redes sociales. Empieza dándole aire al main con un padding: 100px, así separas el contenido de los bordes y respiras visualmente.

Luego, accede al contenedor .social-icons (que es tu <ul>) y aplica esta combinación, que es la base de cualquier layout horizontal con Flexbox:

  • display: flex para colocar los iconos uno al lado del otro.
  • justify-content: center para centrarlos horizontalmente.
  • margin-top: 40px para despegarlos del texto superior.

Un detalle clave: justify-content solo funciona si antes declaraste display: flex. Si lo omites, la regla simplemente no hace nada [05:30].

¿Cómo centrar el contenido dentro de cada cajita?

Cada <li> contiene un enlace <a> con el icono. Para que el icono quede centrado dentro de su cajita, aplica al .social-icon:

  • display: flex.
  • justify-content: center para el eje horizontal.
  • align-items: center para el eje vertical.

Con Flexbox centrar en ambos ejes deja de ser un dolor de cabeza. Es una de esas cosas que, una vez la entiendes, no quieres volver a maquetar sin ella.

¿Cómo ajustar el modelo de caja de los enlaces dentro de un li?

Aquí viene lo interesante. Al inspeccionar las cajitas notas que los <li> tienen un tamaño y los <a> adentro dejan espacio vacío. La solución es inflar el enlace hasta llenar toda la caja:

css .social-icon { width: 100%; height: 100%; padding: 15px; border-radius: 5px; }

Piénsalo como un globo dentro de una caja: el <li> define el tamaño exterior y el <a> se infla para ocupar todo el ancho y el alto disponible.

Otro punto importante es dónde poner el margen. Si aplicas margin-left al enlace <a>, el margen queda dentro de la caja y rompe el diseño. Mejor pásalo al <li>:

css .social-icons li { margin-left: 8px; }

Así cada cajita se separa de la siguiente sin afectar el contenido interno [10:45].

¿Cómo quito los puntos de una lista en CSS? Aplica list-style: none al <ul>. Eso elimina las viñetas que los navegadores agregan por defecto a cualquier lista.

¿Cómo aplicar colores de marca a cada red social?

Cada red social tiene su identidad visual, así que en lugar de un color genérico, usa el ID de cada enlace para asignar el background correcto. La estructura queda así:

css .main .social-icons #linkedin { background: #0077B0; } .main .social-icons #github { background: #23272B; } .main .social-icons #twitter { background: #1DA1F2; } .main .social-icons #youtube { background: #F70000; } .main .social-icons #platzi { background: #121F3D; }

Una recomendación práctica: estos códigos hexadecimales los puedes sacar directamente desde el selector de color de las DevTools, arrastrando la pipeta sobre el color que quieres replicar [14:20].

Con esto tu carta de presentación queda lista usando puro HTML5 y CSS3, sin frameworks ni librerías externas. ¿Qué color le pondrías a una red social que no esté en la lista? Cuéntamelo en los comentarios y comparte tu versión final.