No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Agregando 铆conos

7/26
Recursos

Aportes 125

Preguntas 44

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Aqu铆 tienen el link del pack de iconos que usa
https://www.flaticon.com/packs/social-media-86

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>

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 馃槈

As铆 va quedando mi header vertical versi贸n mobile:

**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 鈥渇ont鈥 est谩 en
assets>Social Media>font

Que tal campeon, buen dia鈥 algo radicalmente diferente.

excelente鈥

Me he dado cuenta que a los alumnos de platzi no les gusta que uno 鈥渉able 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.

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

Para las personas a la que no es carga el pack de iconos, colocar 鈥渇imanager鈥 antes del nombre de la clase, de esta forma:

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.馃敟馃敟馃敟

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 鈥榝laticon.css鈥, no funcionar谩 haciendolo desde el span.

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;
}

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

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 鈥溍璫ono鈥 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 鈥淚con 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^=鈥渇laticon鈥漖:before, [class=" falticon-"]:before,
[class^=鈥渇laticon鈥漖: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

Yo lo hice as铆 y me funcion贸: ![](https://static.platzi.com/media/user_upload/image-83ce54b5-cca9-444f-89b0-6f9a290b0fa7.jpg) ![](https://static.platzi.com/media/user_upload/image-3760839a-9e87-4e48-90d1-2765dd08ebde.jpg) ![](https://static.platzi.com/media/user_upload/image-b76c0f18-4684-4c45-88a2-0c3a9be33b84.jpg)

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

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

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.

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%);
}

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?

Tuve algunos 鈥渆rrores de dedo鈥 y casi que no doy con los errores. 馃槀馃槀馃槀

que buen profe