You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
2 Hrs
48 Min
22 Seg

Estilos para las imágenes de redes sociales

13/27
Resources

How to style social media icons on our website?

To achieve an attractive visual experience, it is crucial to properly style the social media icons on your website. Here we will guide you step by step so you can achieve the desired style using HTML5 and CSS3, without getting complicated with other technologies. Let's make your site amazing!

Why use padding in the main?

The first step is to make sure that our page has enough visual space. For this, we apply a padding to the main element:

main { padding: 100px;}

This spacing prevents the elements from looking too close together, especially important when checking the layout on mobile devices. This can be done by enabling device view in the Chrome browser.

How to adjust the viewport for mobile devices?

A critical point when working with responsive design is to adjust the viewport. Add this meta tag in the head of your HTML file:

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

This setting ensures that the viewport width is equal to the device width and that the initial scale is 1, solving display issues on small screens.

How to style social icons?

To make your icons look organized and attractive, follow these steps:

  1. Access the icons:

    Make sure the class of the icons is correct for CSS. For example:

    .social-icon { background: red; /* Temporarily for display */}
  2. Use Flexbox for alignment:

    We use display: flex to align the icons side-by-side and center them:

    .social-icons { display: flex; justify-content: center;}
  3. Add spacing and styling:

    Adjust the margins and add border-radius to enhance the presentation:

    .social-icon { margin-left: 8px; display: flex; justify-content: center; align-items: center; padding: 15px; border-radius: 5px;}

How to remove the dots from the list and adjust the boxes?

To remove the dots that appear by default in ul, and make sure that each link occupies its entire container:

.social-icons { list-style: none;}
.social-icons li { width: 100%; margin-left: 8px; /* Moved from element to */}

How to apply specific colors to each icon?

Using the specific IDs of each icon, apply the appropriate colors according to the social network:

#linkedin { background: #0077B0;}
 #github { background: #23272D;}
 #twitter { background: #1DA1F2;}
 #youtube { background: #FF0000;}
 #platzi { background: #121F3D;}

What have we accomplished?

You've learned how to style your social icons with basic CSS techniques, using properties like flexbox and adapting the layout for mobile. The whole transformation was achieved with HTML5 and CSS3, proving that with a solid foundation and good practices you can create a professional and attractive website. Go ahead and continue exploring the potential of web design!

Contributions 25

Questions 14

Sort by:

Want to see more contributions, questions and answers from the community?

Explicaciones super claras, Buenísimo curso

Para iniciar e incluso para afianzar conocimientos está muy buena la explicación.

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

Live color picker Con esta extensión se les facilita saber el color de algún elemento, yo la uso en Chrome

Increíble lo sencillo que es crear una primera página de presentación! 😄

Muy bueno el curso, seria bueno que dejaran los archivos e imagenes en recursos para poder trabajar el ejercicio con mayor facilidad, pero igualmente esta muy bien explicado

Muy bueno el curso, puede uno pensar que se pasa de básico la explicación, pero es necesario. Incluso para repasar explicaciones.

  • <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> : Es una etiqueta que se coloca en la sección head del documento HTML para definir cómo se debe ajustar el contenido del sitio web al dispositivo que lo está mostrando. Con esta etiqueta, se establece la anchura del dispositivo como el ancho inicial y se define el nivel de zoom que se aplicará a la página.
  • justify-content: Es una propiedad de CSS que se utiliza para alinear y distribuir elementos dentro de un contenedor en el eje horizontal. Permite alinear los elementos al inicio, al final, al centro, distribuirlos uniformemente o separarlos por igual.
  • align-items: Es una propiedad de CSS que se utiliza para alinear elementos dentro de un contenedor en el eje vertical. Permite alinear los elementos al inicio, al final, al centro o distribuirlos uniformemente.
  • list-style: Es una propiedad de CSS que se utiliza para establecer la apariencia de las viñetas o numeración de una lista. Permite definir el tipo de viñeta o numeración, su posición y su imagen de fondo.

creo entender lo que sucede, fijate en CSS en el apartado de este video cambiamos el estilo de

> main .social-icons li {
	width: 100% ;
	height: 100% ;
}

y esto hace que el ancho de las imagenes se coloquen respecto al ancho del texto que tenemos arriba que tambien esta dentro de main y de P
Intenta cambiar a

main .social-icons img {
	width: 100% ;
	height: 100% ;
}

notaras que las imagenes se acomodan correspondiente al tamaño original que tienen, intenta cambiarle
width: 20px y height: 20px

Excelente Clase. Muy buena introducción a la creación web.

Para los que quieran quitar los puntitos de los iconos usen esta linea despues de .social-icons: list-style: none;
Me gusta cómo explica este profe. Más cursos con él por favor.

Les recomiendo este sitio para buscar iconos

Te permite lo siguiente

  1. Descargar en PNG
  2. Descargar en SVG
  3. Copiar codigo SVG para usar directo en HTML o Figma
  4. Copiar link para usarlo en Notion
  5. Seleccionar un color determinado (aunque eso pude quedar de lado cuando ya sepas usar CSS)
![](https://static.platzi.com/media/user_upload/image-54316d05-d0c5-45a4-9c11-aaecbbc9a395.jpg) Hola, me quedan los iconos sin color. Hice la prueba con Instagram y le puse que coloque el fondo rojo, pero no se cambia... y los demás iconos desaparecieron cuando quite el background de "main .social-icons { */\* Estilos de main \*/* main {     padding: 100px;} main .social-icons {     display: flex;     justify-content: center;     margin-top: 40px;     margin-top: 40px;     list-style: none; }main .social-icons li {     margin-left: 8px;} main .social-icons .social-icon {     display: flex;     justify-content: center;     align-items: center;     padding: 15px;     border-radius: 5px;     width: 100%;     height: 100%; } main .social-icons #Instagram {     background: red; }
pueden decirme el por que se ve asi ? ![](https://static.platzi.com/media/user_upload/image-95b24172-40fa-4055-8210-9aecc613bad2.jpg)
¡¡Ayuda!! Hice todo exactamente como en el código pero mi elemento de instagram está prácticamente inexistente .¿Les sucedió eso? ¿Cómo lo solucionaron? ![](https://static.platzi.com/media/user_upload/image-dc559405-f887-4c13-94e4-03f0ee055283.jpg)

El profesor explica tan sencillo que entendí mejor que en el de programación básica.

Genial!

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

> 

Llevo tomando varias clases de varios temas, pero encontre esta clase que me intereso y con este profesor no me quedo ninguna duda, todo le entendi, explica muy bien y lleva el hilo conversacional de la clase perfectamente

ME GUSTO EL RESULTADO!! ya esta casi terminado, con solo dos lenguajes la verdad es que si se hace un buen avance jeje

Excelente, a pesar de ser un curso introductorio las clases son buenísimas. Creo que Carlos debería dictar los cursos de Celis.

Acá pueden encontrar una guía para profundizar en flex-box. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Excelente profesor explica paso a paso y no deja nada en el aire y hasta lo más obvio lo explica uno de los mejores super recomendado

Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o marcos HTML tradicionales, para organizar el contenido de un sitio web. El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página. Cuando crea un diseño CSS, coloca etiquetas div en la página, añade contenido a las mismas y las sitúa en distintos lugares. A diferencia de las celdas de tabla, que solo pueden situarse en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una página web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de forma relativa (especificando su ubicación con respecto a su ubicación actual). También puede situar etiquetas div especificando elementos flotantes, rellenos y márgenes (el método preferido conforme al estándar web actual).