Integración de Iconos de Redes Sociales en HTML y CSS

para los que no les sirva bien los flaticons es porque le tienen q poner la clase fimanager antes de llamar al flaticon ejemplo:

<div class="icons">
          <a href="#"><span class="fimanager flaticon-001-facebook"></span></a>
          <a href="#"><span class="fimanager flaticon-002-twitter"></span></a>
          <a href="#"><span class="fimanager flaticon-011-instagram"</span></a>
          <a href="#"><span class="fimanager flaticon-010-linkedin"></span></a>
          <a href="#"><span class="fimanager flaticon-008-youtube"></span></a>
        </div>

Así va quedando mi header vertical versión mobile:

Bueno he estado estado viendo que muchos presentan el inconveniente de los iconos pequeños. La solución a esto es el pseudo elemento “::before” … al aplicarle el font size a esto en específico se les aplicará si o si. Les dejo el ejemplo:

header .icons span::before{
    /* los íconos se tratarán como fuentes */
    color:white;
    font-size: 50px;
}

Ya ustedes deciden que tamaño le ponen 😉

**Aquí tienen la carpeta con los mismos archivos que aparecen en el vídeo **
https://www.dropbox.com/sh/pi859sgbnt4ejyr/AADSWyJddaYu4TD5RPNGg_3ja/Social Media/font?dl=0&subfolder_nav_tracking=1

Debería haber una clase sobre cómo darle estilos a los íconos. Bien fácil es descargar el archivo flaticon.css y linkearlo. Me hubiera gustado que lo haga desde cero.

Este es el CDN de fontawesome 4.7 que trae las clases necesarias para íconos de redes sociales: https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

...

<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>

Es importante que si vamos a subir nuestro proyecto a github, no subamos archivos binarios, generalmente los archivos como imágenes, videos o binarios compilados son mucho más grandes que los archivos de texto de nuestro código y si hacemos commit de ellos a nuestro repositorio, el tamaño de este se volverá muy grande. Les recomiendo que inserten sus imagenes por URL directo, adicional le dejo unas paginas para alojar imagenes, videos, gif y extraigan la url:
https://imgur.com/
https://giphy.com/
https://postimages.org/

Para quienes se descargaron los assets del link de la primera clase y no encuentran la carpeta “font” está en
assets>Social Media>font

Les dejo la URL de la carpeta font que uso en el video:
https://www.dropbox.com/sh/pi859sgbnt4ejyr/AADSWyJddaYu4TD5RPNGg_3ja/Social Media/font?dl=0&subfolder_nav_tracking=1

Que tal campeon, buen dia… algo radicalmente diferente.

excelente…

Me he dado cuenta que a los alumnos de platzi no les gusta que uno “hable mal” de los profesores, pero esos selectores no están para nada optimizados. Me da mala impresión.Por otro lado, en años recientes todas las buenas prácticas que traiamos de años se han ido perdiendo por lo que algunos han llamado el backendification del frontend.

• la etiqueta span actúa como un contenedor en línea, sirve para aplicar estilos a un texto o agrupar elementos en línea.

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/span

Si es chico el icono, cambien font-size en flaticon.css por uno que se ajuste mejor, recomiendo entre 35-45px

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 35px;
font-style: normal;
margin-left: 20px;
}```

Flaticon ahora es de paga muchachos, mejor busquen en youtube un tutorial corto sobre como usar fontawesome, es basicamente lo mismo, pero gratis.

Si buscan cambiar el tamaño de los iconos, editen en el archivo flaticon.css en la parte del font-size

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
        font-size: 24px;

Originalmente esta en 20px, yo lo cambie a 24px, se ve mejor, igual intenten.🔥🔥🔥

Por si quieren aprender a usar fontawesome: https://youtu.be/w7OSE1-8F8s

No me cargan los iconos me aparecen así

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mi blog</title>
     <link rel="stylesheet" href="./css/main.css">
     <link rel="stylesheet" href="./css/font/flaticon.css">
</head>
<body>
     <header class="header">
          <section class="header-icons-container">
               <div class="icons">
                    <a href=""><span class="flaticon-001-facebook"></span></a>
                    <a href=""><span class="flaticon-002-twitter"></span></a>
                    <a href=""><span class="flaticon-011-instagram"></span></a>
                    <a href=""><span class="flaticon-004.linkedin"></span></a>
                    <a href=""><span class="flaticon-008-youtube"></span></a>
               </div>
          </section>
          <nav>
               <section class="nav-logo-container">
                    <a href="/"><img src="" alt="Logo de mi blog"></a>
               </section>
               <section class="profile-link">
                    <a href="perfil.htm">Sobre mí</a>
               </section>
          </nav>
     </header>
     <main class="main">

     </main>
</body>
</html>

También les recomiendo material design para los iconos y muchas más herramientas de diseño

https://www.flaticon.com/packs/social-media-86

Para las personas a la que no es carga el pack de iconos, colocar “fimanager” antes del nombre de la clase, de esta forma:

Comparto la carpeta con los mismos archivos que tiene el tutor: drive

Para quienes no entiendan como exportar desde 0 la carpeta font, acá les dejo un video muy simple que explica como es el proceso
https://www.youtube.com/watch?v=_AzfqBMTspU

Si descargaron la carpeta de Flaticon con todos sus archivos como lo tiene el profe, en el archivo flaticos.css (donde se pueden ver los nombres de las clases de esos ícos), puedes agregarle directamente el color que necesite y te ahorras añadir una nueva clase en tu archivo propio de estilos.

[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 30px;
font-style: normal;
color: white
/* margin-left: 20px; */ //Este margin es opcional, a mi no me gustó cómo se veía por lo que lo quité.
}

Usar iconos de esa forma es malísimo para el performance. Usando lighthouse hice la comparación entre esta forma y usar svg para lo iconos y fue una diferencia abismal de menos de 50% a 98%.

Tip: Editar el tamañno de los icons desde el ‘flaticon.css’, no funcionará haciendolo desde el span.

ahora en estamos en el 2023 y hay muchas formas de poner los iconos mas facil y rapido que hace 4 años atras

para quienes insertaron png para los iconos en vez de svg y que quieran que estos en vez de iconos negros sean blancos deben agregar esta propiedad en el span o donde este insertando la imagen.

span{
	filter:invert(100%);
}

para los iconos les recomiendo font awesome es mejor

Yo usé unos íconos de una página llamada fontawesome

Y sí, también se pueden usar como si fueran fonts y darle color y tamaño agregándole una clase extra como se muestra en el siguiente ejemplo

HTML:
<div class="icons">
                <a href="https://www.facebook.com/" target="_blank">
                    <i class="icons__item fa-brands fa-facebook"> </i>
                </a>
                <a href="https://www.twitter.com/" target="_blank">
                    <i class="icons__item fa-brands fa-twitter"></i>
                </a>
                <a href="https://www.instagram.com/" target="_blank">
                    <i class="icons__item fa-brands fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/" target="_blank">
                    <i class="icons__item fa-brands fa-linkedin"></i>
                </a>
                <a href="https://www.youtube.com/" target="_blank">
                    <i class="icons__item fa-brands fa-youtube"></i>
                </a>
</div>

CSS:
.icons__item {
    width: 32px;
    height: 32px;

    color: seashell;
}

no pude bajar los archivos asi que baje los png y jugue con el background-image:url

No entiendo porque la necesidad de hacerlo tan diferente a como nos enseñaron a poner iconos en los cursos anteriores??? No era mas simple usar una foto y ponerle estilos a esa foto? Muy rebuscado sin sentido.
Ademas si quiero agregar un icono que no está en el archivo de css para darle un toque personal al blog no se puede porque no está la clase.

Me adelante un poco este es el resultado hasta ahora

Pueden usar otros iconos desde la pagina de unicon o fontawesome linkiando en el head

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

y luego entrando a la pagina y copaindo la etiqueta i en el html

Ejemplo:

<i class="uil uil-facebook-f"></i>

Que desorden los recursos de este curso…

6. Agregando íconos:

En este caso se está haciendo uso de la carpeta que creamos al inicio del curso de font, y debemos llamar al archivo css dentro de esa carpeta de la siguiente manera: (dentro de HTML)

<link rel="stylesheet" href="./assets/font/flaticon.css">

Luego podremos ir agregando cada “ícono” usando el nombre de su clase.

Pues la página va quedando así:

Es posible usar un texto, o en este caso ícono, de color gradiente:

background: radial-gradient(circle at 50% -20.71%, #faffff 0, #d8f0fa 25%, #b5def2 50%, #92cbeb 75%, #72b9e5 100%);
    -webkit-background-clip: text;
    color: transparent;

Para los que como yo, quedaron con la duda de como buscar/descargar estos íconos directamente desde flaticon, les recomiendo el siguiente video.

En el cual podemos seleccionar los iconos que queremos utilizar en nuestra propia colección y luego proceder a descargarlos en formato “Icon Font”

Descargamos un .zip que al extraer en la ruta de nuestro proyecto podemos linkear directamente nuestro CSS.

muy bueno pero no esta github 🙄🤨

header .icons span{
  color: aliceblue;
}```

m

A alguien más le pasa que ve los iconos pequeños?

Si los iconos le aparecen como un cuadro en en index.html, agregen esta parte al archivo flaticon.css.

[class^=“flaticon”]:before, [class=" falticon-"]:before,
[class^=“flaticon”]:after, [class=" falticon-"]:after {
font-family: Flaticon;
font-size: 30px;
font-style: normal;
margin-left: 20px;
}**
Por alguna razon, el archivo no trae esa parte del codigo.

creo que falto la carpeta en enlaces y archivos

No entiendo cómo se crea el archivo flaticon.css alguien sabe? o cómo se descarga?.

¿Cuál es mas apropiado utilizar un Font como ícono o un SVG?

Para los que tienen el problema de que no se ven los iconos

Hay que ponerles la clase de fimanager, antes de incluir la clase de flaticon…

      <div class="icons">
        <a href="#"><span class="fimanager flaticon-001-facebook"></span></a>
        <a href="#"><span class="fimanager flaticon-002-twitter"></span></a>
        <a href="#"><span class="fimanager flaticon-011-instagram"</span></a>
        <a href="#"><span class="fimanager flaticon-010-linkedin"></span></a>
        <a href="#"><span class="fimanager flaticon-008-youtube"></span></a>
      </div>```

Por si aun no toman el curso de Css Grid Layout:

Curso de CSS Grid Layout - con Leonidas Esteban

Tenía este problema, no se separaban los elementos de la derecha. Ahora con los íconos quedó bien.

Excelente clase para recordar temas básicos. Muy ordenado el profesor con el material y su explicación.

Muy interesante 😄 vamos bien

Les recomiendo este enlace para que no tengan la necesidad de descargar siempre iconos.

Puedes enlazar tu iconos sin necesidad de descargar aquí: icon8

realmente estaba perdida no entendia de donde habia salido el archivo flaticon.css, aclare dudas con el video https://www.youtube.com/watch?v=DK8bRhYm39Y

Les dejo un link para que puedan profundizar mas en como funcionan las propiedades justify y align y todas sus versiones.

url(‘https://www.digitalocean.com/community/tutorials/css-align-justify’)

Una cosa, el segundo icono no es de twitter es de tumblr.

Faltó el archivo de tik tok, pueden realizarlo en illustrator en formato svg

no me parece deberia explicar paso a paso como se baja cada archivo o carpeta . hay nos deja peor . no es justo que se guarde eso parael solo

No entendía la manera en la que el archivo FlatIcon trae los logos de las redes sociales hasta que revisé que referencia archivos
.eot .woff .ttf los cuales están en la carpeta /font. Incluso el archivo .html es en sí mismo un instructivo de cómo usar dichas imágenes.

Espectacular este curso

Sin descargaron las img, y no quieren usar las clases que trae favicon.css, pueden hacer uso de esta pagina.

Pueden generar un estilo con la propiedad filter y cambiar el color de las img

Trucazo ;D

Si les pasa como a mi que no les funciona o como a todos, bien explico que pasa:

-Lo que se usa es una fuente ( tipografía) que genera los iconos.
-Diego nos deja en los recursos los archivos que en total son 7 para que todo pueda funcionar bien.
-Tiene que crear su carpeta de assets, y pegar esos 7 archivos ahí para que todo funciones correctamente.
-Les dejo aquí un enlace para que puedan descargar estos recursos y no tengan mayor problema.
Flaticon

Me parece redundante poner

header .icons span { }

En lugar de

.icons span { }

Alguien ve una alguna utilidad donde el primero es más útil que el segundo?

Les recomiendo bastante esta página, https://fontawesome.com/ hay muchos iconos gratuitos, de ahí bajé los de mi proyecto

Así va quedando, mobile first.

Si no les anduvo el link porque expiro o les pide ser premium para bajar el archivo, pueden agregar cualquier imagen que quieran usar de logo a esta pagina:
https://www.online-convert.com/es
se las transforma a archivo svg y de ahi lo linkean directamente.

Caramba!!, creo que me adelanté a esta clase. Desde el principio le había puesto los íconos y el logo 🤭😂

No te olvides de probar Font Awesome para los íconos.

No me muestra los iconos

<c<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Blog</title>
    <link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="CSS/fonts/flaticon.css">
</head>
<body>
  <header>
      <section class="header-icons-container">
          <div class="icons">
              <a href="/"><span class="Flaticon-001-facebook"></span></a>
              <a href="/"><span class="Flaticon-002-twitter"></span></a>
              <a href="/"><span class="Flaticon-003-instagram"></span></a>
              <a href="/"><span class="Flaticon-010-linkedin"></span></a>
              <a href="/"><span class="Flaticon-008-youtube"></span></a>
          </div>
      </section>
      <nav>
          <section class="nav-logo-container">
              <a href="/"> <img src="/" alt="Logo de mi blog" ></a> 
          </section> 
          <section class="profile-link">
              <a href="perfil.html">Sobre mí</a>
          </section>
      </nav>
  </header>  
</body>
</html>

ode> 

Lo que hacen muchos estilos que vienen con los íconos, es simplemente definir clases a las que se les asigna una propiedad, luego de eso, copiamos esas clases a nuestras etiquetas.

A las etiquetas de spam, les podemos dar los logos de nuestras redes sociales.

Deben ir al link https://www.flaticon.com/packs/social-media-86 luego crearse una cuenta y podrán descargar el pack, luego arrastran la carpeta font a su carpeta css y continúan

Buena clase!

Hola. Les comparto una buena práctica para insertar iconos en la página web.

La etiqueta recomendada para agregar iconos a la página web es **<i></i>**, ya que la i de icon está orientada a ello.

Hola chicos!! si sus iconos se ven pequeños pueden cambiarle el font-size en el archivo flaticon.css

)

Me salia en 20px se lo cambie a 30px

Este es el código css del archivo flaticon.css compartido en el repositorio de código. 😄
Por si alguien más se pregunta por qué no le sale igual que el vídeo.

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

/* Esta seccion hace la diferencia */
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 30px;
font-style: normal;
margin-left: 20px;
}

.flaticon-001-facebook:before { content: "\f100"; }
.flaticon-002-twitter:before { content: "\f101"; }
.flaticon-003-whatsapp:before { content: "\f102"; }
.flaticon-004-groupme:before { content: "\f103"; }
.flaticon-005-kik:before { content: "\f104"; }
.flaticon-006-skype:before { content: "\f105"; }
.flaticon-007-periscope:before { content: "\f106"; }
.flaticon-008-youtube:before { content: "\f107"; }
.flaticon-009-itunes:before { content: "\f108"; }
.flaticon-010-linkedin:before { content: "\f109"; }
.flaticon-011-instagram:before { content: "\f10a"; }
.flaticon-012-messenger:before { content: "\f10b"; }
.flaticon-013-twitter-1:before { content: "\f10c"; }
.flaticon-014-snapchat:before { content: "\f10d"; }
.flaticon-015-reddit:before { content: "\f10e"; }

Todo excelente, así vamos por ahora!

Encontre todos los iconos en este link y los puedes poner como si fueran texto con unicode
https://fontawesome.com/icons?m=free

Pueden utilizar el multicurso de visual Studio, solamente mantenienen presionada la tecla Alt y con el mouse linkean donde lo quiere ya cuando hayan realizado los cambios simplemente le dan Esc, Gran clase

Me perdí un poco acá, los iconos no me funcionaban peor gracias a un comentario resolví

Excelente!!! Y yo hace mucho que utilizaba **Flaticon **y matándome descargando los iconos uno por uno para usarlos ja ja ja ja

Listo de 10

Al momento de agregar los nombres de las clases que pertenencen a los iconos de Flaticon creo que no habria ningun problema el cambiarlos a algo más simple, ej:

.flaticon-001-facebook --> .flaticon-facebook

Aunque no se si es una buena práctica en proyectos más grandes…

perfecto sigamos 😄

muy pro

No sabia lo de los iconos, muy interesante. Aprendiendo mucho en este curso.

El repositorio baja a partir de la clase 10

Esta interesante flaticon muy util. Antes batallaba para encontrar los iconos en imagenes

Cómo haría para poner los iconos más grandes? He intentado con font-size y nada

Muy practico y útil lo Flaticon, lo utilizare desde ahora, creando los míos propios.

No me aparecían los iconos y estaba desesperandome ya, hasta que vi como había escrito class=".flaticon-001-facebook" y es sin el puntito en la clase.

Lo comparto para que no le pase a alguien más xd

lo del span para linkear iconos no lo sabia!

excelente curso

Muy buena clase. Pero no me queda claro algo: los íconos que mandamos a llamar desde flaticon.com son letras que usamos para darles formas, o son imágenes?