Manejo de íconos e imágenes en etiquetas

Aunque aquí se usa una imagen como ícono para fines prácticos, en un proyecto real no es bueno usar imágenes como íconos, esto porque las imágenes suelen añadir más peso y tiempo de carga a las páginas, la tendencia hoy en día es usar íconos como SVG o como pseudo-elementos de CSS, para esto existen varias páginas, como lo es FontAwesome, pero si tu quieres crear tus propios íconos y transformarlos a imágenes, te recomiendo mucho usar icomoon, donde tu puedes subir tus imágenes como SVG y icomooon se encargará de crearte tu paquete de iconos personalizados:D!

Actualmente la url de la imagen de usuario ya no se encuentra en el CSS ni en la etiqueta SPAN, sino directamente en el HTML de Google. Es importante revisar el código de todos modos, pero aquí la dejo:

https://lh3.googleusercontent.com/ogw/ADGmqu9yv6YQHk4RPmO4bLrZUTc9EJGT6AdP1S27EDDA=s32-c-mo

Si les paso como a mi que la foto les sale más grande pueden agregar al estilo de img un height: 32px; y width: 32px;

Estas dimensiones son las que google utiliza en esa foto en específico.

Lo más importante acá fue lo de Toogle Wrap JAJAJA ❤️

Te comparto mi icono creado con muchos divs y algo de css

                <a href="">
                    <li class="squares">
                        <div class="square"></div>
                        <div class="square"></div>
                        <div class="square"></div>
                        <div class="square"></div>
                        <div class="square"></div>
                        <div class="square"></div>
                        <div class="square"></div>
                        <div class="square"></div>
                        <div class="square"></div>
                    </li>
                </a>

.squares {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.square {
    width: 4px;
    height: 4px;
    background: #5F5F5F;
    margin: .7px .8px;
}

Para la imagen de perfil no usé la de google, sino que la enlacé de la misma manera que enlacé el icono del menú, creando una clase llamada photo y haciéndole unos arreglos con margin y radius.

nav .nav-right-section .photo{
    background-image: url('https://pbs.twimg.com/profile_images/1197294940449058817/nwnf9lP1_400x400.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: 5%;
}

Se que no tiene mucho que ver pero les comparto el bg del profe.

Si quieren agregar una imagen desde su equipo local y en CSS darle el estilo redondeado.

<li><a href="#"><img src="/Images/avatar.jpg" alt="" /></a></li>

css

nav .nav_right_section img {
 border-radius: 50%;
 margin-left: 15px;
 width: 32px;
  height: 32px;
}

A la hora de colocar esos estilos e imágenes por mi cuenta, me tardé un montón y cometí bastantes errores que quedaron claros al ver ésta clase.
Me doy cuenta que me falta muchísimo por aprender

Es mucho más fácil cuando el profe lo hace jaja

¿Cual es el beneficio de traer toda la estructura de árbol en lugar de llamar solo la clase? Es una duda enorme

Una opción genial es usar un proveedor de iconos, por ejemplo Font Awesome.

si quieren que al pasar el mouse se sombree el menu icon y la foto de perfil tal como pasa en la pagina de google, solo necesitan agregar un borde transparente y luego con hover hacen que cambie de color a un gris claro

nav .nav-right-section .menu-icon{
    background-image: url("/assets/menu.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    width: 32px;
    height: 32px;
    border: 4px solid transparent;
}

nav .nav-right-section .menu-icon:hover{
    background-color: #e2e2e2;
    border: 4px solid #e2e2e2;
    border-radius: 50%;
}

nav .nav-right-section .profile-photo{
    margin-left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 4px solid transparent;
}

nav .nav-right-section .profile-photo:hover{
    border: 4px solid #e2e2e2; 
}

y listo

En Visual Studio Cade con Alt + Z también se puede hacer hace el Toggle Wrap.

Yo siempre me preguntaba porque en mi Visual Studio Code (a diferencia de mis profesores) no podia ver todo el código completo en la pantalla, debia hacer scroll lateral, despues de esta clase aprendi el truco. Es mucho más cómodo trabajar así 😉

Dentro de VSC en view le das click a Word wrap

La propiedad background es un shorthand así que podrían utilizarlo así,

.icon-menu {
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url(../images/icon-menu.png) no-repeat center;
  background-size: contain;
}

Les recomiendo usar Material design para poner el íconos.
Para hacerlo solo tienen que hacer lo siguiente.

1. Insertar este código en head:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"> 

1. Pon el siguiente código en tu html para insertar los íconos. Exáctamente entre las 2 etiquetas “a”. (Ponemos “app” porque es el nombre del icono en material, lo puedes reemplazar por el nombre del icono que necesites).

<span class="material-icons md-24">apps</span>

Cada día aprendo cosas nuevas con estos cursos. Conocimiento al 100%

Por si acaso en ATOM, van a View y es la opción Toogle Soft Wrap⚡⚡⚡

Alt + Z también hace el Toggle Wrap en VS Code.

¡Hola! Si no encontré el link al inspeccionar el código y subí una imagen desde mi local pc, ¿cuáles serían las medidas para que esté del tamaño correspondiente o las propiedades que debería modificar? Gracias, saludos.

Gracias profe yo creo que hasta el momento este debió ser el primer curso tomado

En el reto esta parte se me hizo un poco fastidiosa, no conseguia ningun icono decente.

¡Brutal! se afianzan muy bien los conocimientos vistos en el curso de desarrollo web online.

Les comparto el código por si quieren poner en la imagen de perfil las iniciales de su datos:

HTML:

<li class="avatar">
     <a href="">JC</a>
</li>

CSS:

nav .nav-right-section .avatar{
    background-color: red;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border-radius: 50%;
    margin-left: 15px;
}

nav .nav-right-section .avatar a{
    padding: 0 5px;
    text-align: center;
    color: white;
    font-size: 17px;
    font-weight: bold;
}

Intenté clonar el de Platzi

En qué casos usamos img y background-image? Osea, cómo saber cuándo es mejor usar una u otra?

Me parece mejor aplicar la imagen en HTML que en CSS

Aplique lo aprendido en esta clase e hice unas pequeñas modificaciones en el proyecto que construí al principio y ahora quedo así 😄 Puedes verlo en este Link y aquí tienes el repositorio de Github

Pueden buscar iconos para sus proyectos en Material Design.

Yo descargué la imágen .png de el icono de apps de aquí, agregué la imágen a la carpeta assets de mi proyecto para utilizarla en mi index.html

El tamaño de la foto es 32X32. Hay que agregar un atributo de “width=32” a la etiqueta img

Al igual que podemos buscar fuentes en Google Fonts, se pueden descargar iconos desde [Google Fonts Icons], estan todos los que necesiten y mas si queremos recrear al mismo buscador de Google. (https://fonts.google.com/icons?icon.query=account)
En el screen de abajo, vemos por ejemplo, algunos de los iconos que existen si ponemos “Account” en el buscador.

Clase 9 - Manejo de íconos e imágenes en etiquetas

¿En equipos de trabajo quién se encarga de proporcionar las imágenes que se van a usar en un proyecto?

• El equipo de diseño.

¿Cómo se llama la carpeta en la que almacenamos las imágenes, videos y fuentes tipográficas externas que podemos usar en nuestros proyectos?

• Assets.

¿Podemos poner una imagen como fondo con CSS?

• Sí.

¿Cómo podemos colocar una imagen de fondo con CSS?

• Lo podemos hacer con la siguiente declaración de CSS.

background-image: url('https://static.thenounproject.com/png/756729-200.png');

• Como vemos en este ejemplo la propiedad background-image nos permite agregar una imagen por medio de una url, la cual puede ser externa de nuestro proyecto.

¿Para qué nos sirve la propiedad background-repeat?

• Para elegir si queremos o no que nuestra imagen como background se repita en la pantalla.

¿Cómo podemos evitar que una imagen como background se repita?

• Con la declaración:

background-repeat: no-repeat;

¿Por qué una imagen como background se puede repetir?

• Porque en caso de que el tamaño de la imagen sea menor al tamaño de su contenedor, está intentara repetirse para lograr ocupar todo el espacio disponible.

¿Cómo podemos posicionar una imagen de fondo usando CSS?

• Con la propiedad:

background-position

¿Para qué nos sirve la declaración background-size: contain?

• Para que la imagen de fondo tenga el mismo tamaño que su contenedor.

¿Para qué nos sirve la propiedad border-radius?

• Para poder redondear el borde de un elemento. El valor de esta propiedad debe ser en medidas.

border-radius: 50px;

Se nota que Diego de Granda aprendió empírico, porque esas rutas que usa para llamar al CSS son de alguien que no tiene ni idea de lo básico básico básico y es que puedes llamar simplemente “.menu-icon”.

Que bonito…ahi vamos

Para encontrar íconos para sus proyectos les recomiendo ir a iconos8.es

Les comparto una pagina donde pueden descargar muchos iconos https://icons8.com. Saludos

quedo muy bien el header, y muy buena la forma de poner el icono y la imagen

Recomendadisimo usar iconos, de poderse imágenes en formato SVG. Son vectores y no se pixelan a la hora de hacer zoom.

Generalmente pongo los iconos a nivel del html, tiene alguna repercusión?

Es mejor las imágenes en las carpetas con la URL

<img src="img/covi.jpg" width="100%" >

Ese tip del VS - Code >> _View >>toggle Word Wrap _ fue Dios.

cuando habilita el toggle word wrap te funciona en el momento, si cierras la ventana y vuelves abrir, nuevamente te toca ir al menú para componerla.

En VSCode puedes tener ese valor por defecto en los settings, para que no tengan ese problema.
Preferences - Settings y puedes buscar Word Wrap
También pueden ir a open settings JSON y colocar la siguiente linea.

"editor.wordWrap": "on"

Va tomando forma el Proyecto, se ve interesante y al enfocarse con el micro-learning le dan al clavo si saben direccionar pedagógicamente cada material al objetivo que se desea.

Una pregunta, para CSS es más recomendable trabajar con px, em o rem?

Hice un tutorial de como agregar iconos sin usar imágenes, les dejo el link, espero les sirva compañeros

Woo! genial! Gracias, Excelente clase!

excelente para reparar y observar nuestros errores

No habia entendido muy bien el background-img hasta ahora. Buena clase.

Hay alguna diferencia entre colocar las imagenes estaticas (Iconos, logos, etc) en forma de background, o colocarlas dentro de una etiqueta <a>? Ya que veo más facilidad y simplicidad en el código agregandolas asi:
<li><a><img src=“icon.png”></a><li>
que tener que ajustar todos esos valores en el background. Opiniones?

toggle Word Wrap me sirvió demasiado, no esperaba aprenderlo en este curso, brutal !!

Así vamos 😎

Otra manera de agregar la imagen de perfil:
Este es el codigo que use para agregar la imagen pero desde el css y con una clase en el li de la imagen.

HTML

  <li class="menu__photo">

CSS

nav .nav-right-section .menu__photo{
    background-image: url('/img/unnamed.jpg');
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-size:contain ;
}

Recuerden agregar la altura y el ancho cuando lo hagan como el profe.

Awesome!

Les comparto una forma de implementar iconos de Google desde Google Fonts. 😄

Implementar iconos

Pueden implementar los iconos ofrecido por Google de forma gratuita desde su página de Google Fonts.

Para implementarlo tienen que incluir esta línea de en su head en el HTML.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Otras formas de implementar los iconos de Google.

Luego para poder usarlo tienen que seleccionar el icono que quieren usar y pegar la etiqueta span que les aparece en el lateral derecho de la pantalla.

Si quieren usarlo en otra etiqueta, aparte de la span, pueden copiar el nombre de la clase y pegarla en donde desean usarla junto con el contenido que necesita el icono para funcionar.

<a href="#" class="material-icons">apps</a>

Problemas con la implementación

En caso de tener algún problema al querer usar algún icono, en la clase de su etiqueta de HTML simplemente copie y pegue class="material-icons".

<etiqueta class="material-icons"> nombre del icono </etiqueta>

yo en la parte del icono de las aplicaciones no puse la imagen si no que se me dio por experimentar y hacer los puntos con div

<li>
                    <a href="" class="enlce">
                        <div class="cajas">
                            <div class="conteiner__cajas">
                                <div></div>
                                <div></div>
                                <div></div>
        
                                <div></div>
                                <div></div>
                                <div></div>
        
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </a>
                </li>

.cajas{
    width: 20px;
}
.conteiner__cajas{
    display: grid;
    display: flex;
    flex-wrap: wrap;
    gap: 1.9px;
    
}
.conteiner__cajas div{
    width: 5px;
    height: 5px;
    background-color: white;
    border-radius: 50%;
    margin-top: 0.4px;
}

al utilizar el icono de menu como imagen de fondo y quitar el contenido del link “icon” al pasar el cursor por encima este no genera la manito, porque entiende que es un lugar vacio, con un lindo fondo claro, pero vacio como la existencia

En mi caso al presionar <inspeccionar> a la página de Google, no me salía el background-image.

Para poder colocar mi foto hice click derecho sobre la foto > copiar dirección de imagen y luego lo añadí al código de HTML.

Resumen

1

2

3

4

5

6

7

8

9

muy buen video la verdad cuando yo lo hize sin ver los videos ocupe position para separar el icono y la imagen aunque yo no ocupe icono sino que los hize con puros divs de color negro XD

Hice el ícono de los cuadrados uniendo 9 cuadrados de ícono :c

Me gusta mucho este curso. Este profesor explica de una manera sencilla pero super bien.
Estoy tratando de poner una imagen de mi trabajo pero no me funciona. Voy a seguir aprendiendo y nunca parar de aprender.

Acá mi resultado del header. (Lo he hecho por mi cuenta entonces habrá alguno que otro error y es diferente al de Diego). El ícono de los círculos está en SVG, lo saqué inspeccionándolo en la web oficial de Google, lo mismo la foto:

Por si alguien lo quiere insertar igual en su código, acá les dejo lo que hice yo:

HTML:

<li class="li-svg">
            <a href="/" role="button" name="Google Aps" 
              ><svg class="navbar-svg" focusable="false" viewBox="0 0 24 24">
                <path
                  d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
                ></path></svg
            ></a>
          </li>

CSS:

.navbar-svg {
  color: rgba(255, 255, 255, 0.87);
  fill: currentColor;
  width: 40px;
  height: 40px;
  padding: 8px;
  vertical-align: middle;
}

.li-svg {
  padding: 4px;
}

Podemos agregar la declaración de cursor: pointer; a la clase de .menu-icon para que se cambien el cursor sobre la imagen de menú:

nav .nav-right-section .menu-icon {
    background-image: url("https://static.thenounproject.com/png/756729-200.png"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
    width: 25px;
    height: 25px;
    cursor: pointer;
}

Les comparto estas herramientas donde se pueden descargar los iconos

• Google Font Icons
• flaticon Con frecuencia recurro a esta
• fontawesome
• iconos8

otra manera de hacerlo es

background-image:url('//ssl.gstatic.com/gb/images/i1_1967ca6a.png')

y agregarle

background-position: -132px -38px;

hay varios trucos en VS estudio que nosabia el
menu vista - opcion togle
plugin live server live server 👍

Gracias a este vídeo mejore el rendimiento de mi página! ya que es mejor siempre referenciar las imágenes e íconos a través de urls en vez de descargarlas y guardarlas dentro de tu proyecto, ya que hace la carga del mismo mucho mas lenta en el navegador. Además que al ser archivos binarios a Github se le complica un poco manejarlos al subirlos como parte del proyecto. Muy buena clase!

La url de la imagen del perfil de google la encontré directamente en el código html con el inspector de elementos.

Este es el icono según el propio Google

<a href="#"><svg focusable="false" viewBox="0 0 24 24">
                            <path
                                d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
                            </path>
                        </svg></a>

En VSCode presionas ALT + Z = Toggle Word Wrap

https://materialdesignicons.com/

Aqui pueden descargar muchos iconos tambien

Genial, todo va muy rapido de alguna manera pero se entiendo muy bien

View/Toggle Word Wrap o pueden utilizar Alt + z para que el código se acomode al tamaño de la pantalla que tengan.

en los casos que yo tenga un icono descargado de, por ejemplo; flaticon como haría? porque ahí tengo que hacerlo en una clase.
Yo lo hice de este modo, pero debe de haber una mejor forma {más semántica de hacerlo}

<div class="cuadrado"><div class="flaticon-mostrar-boton-de-aplicaciones"></div></div>```

Compañeros, a qué se debe que la imagen colocada para la clase .menu-icon sea solo sea visible hasta que las etiquetas que señalo (1,2,3,4) en mi código son colocadas? Es decir, si las comentara o si no estuvieran, mi ícono no se vería a pesar de estar poniendo el link de la imagen. Por qué pasa eso?

nav .nav-right-section .menu-icon {
    background-image: url("https://static.thenounproject.com/png/756729-200.png");
    background-repeat: no-repeat;
    background-position: center;  /*1*/
    background-size: contain; /*2*/
    width: 25px; /*3*/
    height: 25px; /*4*/
}

Tuve algunos problemas con los selectores decidi mejor hacerlo con ids

body{
     margin: 0;
     padding: 0;
     font-size: 13px;
     font-family: Arial, Helvetica, sans-serif;
}
/* -------------------Header------------------- */
header{
     display: flex;
     width: 100%;
     height: 60px;
     flex-direction: row-reverse;
     align-items: center;
}
header nav ul li{
     display: inline;
     margin: 0 15px;
}
a{
     color: black;
     text-decoration: none;
}
li{
     height: auto;
     width: auto;
}
ul{
     display: flex;
     align-items: center;
}
.menu-icon img{
     background-position: center;
     background-size: contain;
     width: 25px;
     height: 25px;
     align-self: flex-end;
}
#imagen-perfil{
     border-radius: 20px;
}

tiene una basta cantidad de íconos para todo tipo de proyectos, suelo usarla con bastante regularidad. Es buenísima.

¿Cual es la diferencia entre usar la etiqueta HTML img o usar la propiedad de CSS background-image?

yo lo que avia puesto era poner las dos imagenes en el html y editarlas con css, pero el lo hizo de dos maneras xD

Estupenda clase instructor Diego, yo hubiera usado una imagen en la carpeta pero utilizar el enlace que Google usa para nuestra foto de perfil fue una buena idea.

Las propiedades de fondo CSS se utilizan para definir los efectos de fondo para los elementos.
color de fondo: background-color
imagen de fondo: background-image
repetición de fondo: background-repeat
adjunto de fondo: background-attachment
posición de fondo: background-position

literal este curso es lo que es, es practico

Dejo aquí la imagen oficial que usa google para los iconos e imágenes:

https://ssl.gstatic.com/gb/images/i1_1967ca6a.png

en mi ejercicio yo descargue el icono y lo guarde en la carpeta de assets y use la etiqueta img …todavia no tengo claro cuando usar img o background-img

Para sacar el Google Icon Menu yO lo saque de esta pagina…

Yo lo realize de esta forma, importe desde google los iconos y despues lo declara como una clase para que se aplicaran.

les mando el icono de aplicaciones actualizado de google https://www.flaticon.es/icono-gratis/aplicaciones_8567200?k=1684697901761&sign-up=google

Asi me esta quedando.

Header

Hola a todos, quiero compartirles otra manera de incluir el ícono de las Apps oficial del Material Desing de Google a la barra de navegación:

1. Primero, deben incluir el link a través de Google fonts para incluir los íconos en la página que estén desarrollando:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Pegan esta línea de códido en el Head del proyecto.
2. Dentro de la etiqueta a dónde va el ícono pegan la siguiente línea <span class="material-icons">apps</span> con lo cual el arbol del HTML les debería quedar de la siguiente manera:

<li>
  <a href="#">
    <span class="material-icons">
      apps
    </span>
  </a>
</li>

Y ya con eso les aparece el mismo ícono de menú en su proyecto de una manera más rápida.

Pueden consultar más información de como incluir los íconos en la siguiente página: https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web

tuve que retroceder y ver este curso para repasar un monton de cosas! excelente diego!

En esta pagina pueden encontrar diversos iconos https://www.flaticon.com/free-icons/google
Espero les sirva 😃

(

La foto de perfil ya no se encuentra en la etiqueta <spam sino en un <img class, cierto!!!

Otra manera de llamar a los elementos en nuestra hoja d eestilos es a través de la pseudoclase ilustrada. Asi nos evitamos colocarle tantas clases a nuestro código. Si creen que es una mala práctica hacerlo asi me podrían corregir o dar algun feedback respecto a ello (soy nuevo en esto)