Íconos y manejo de background hover

Si tienen la lupa de color negro, les tengo un truco 😉
En la clase que la contiene, ponen lo siguiente

opacity: 0.4;

Lo que hace es ajustar la opacidad del elemento, siendo 1 el 100% y 0 el 0% (Por lo que 0.4 es el 40%)
El resultado se vería así

Jorvict

Aquí va un pequeño aporte con respecto a la propiedad Box-Shadow según las notas que pude tomar investigando en internet.
En nuestro ejercicio se colocó “box-shadow: 0 1px 6px 0 #20212447;” el cual se lee de la siguiente manera:
Position X : Es el primer valor especificado (En nuestro caso es 0), mientras más alto sea el valor que se especifique, mas a la derecha se posicionará la sombra. Acepta valores negativos los cuales posicionarán la sombra del lado izquierdo.
Position Y : Es el segundo valor especificado (En nuestro caso es 1px), mientras más alto sea el valor que se especifique, mas hacia abajo se posicionará la sombra. Acepta valores negativos los cuales posicionarán la sombra del lado superior.
Blur : Es el tercer valor especificado (En nuestro caso es 6px), cuanto mayor sea el valor, mayor sera la difuminación de la sombra. Éste no acepta valores negativos.
Spread : Es el cuarto valor especificado (En nuestro caso es 0), los valores positivos harán que la sombra se expanda, éste si acepta valores negativos los cuales harán que la sombra reduzca su tamaño.
Color : Es el quinto valor especificado (En nuestro caso es el valor 20212447), simplemente es el color que se le otorgará a la sombra.
Sí desean pueden usar esta herramienta para visualizar como afecta cambiar los valores con relación a como se visualizará la sombra: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
Sí esta información les fue de utilidad por favor denle like al comentario para que más compañeros también puedan verlo 😄

jorge llanque

For remember

Sandra Menendez Alonso

Refactorizando un poco

main .main-input .search-icon,
main .main-input .micro-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
}

main .main-input .search-icon {
    background-image: url(' https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png');
}

main .main-input .micro-icon {
    cursor: pointer;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png');
}

Jhonnatan Salamanca

Una palabra clave para encontrar imágenes con el fondo transparente es vector.
vector de search
vector de micrófono google

Juan Camilo Espitia

micro:https://www.pinclipart.com/picdir/big/32-322562_open-google-microphone-icon-clipart.png

Hola muchachos les dejo iconos con background transparente.
lupa:https://pngimage.net/wp-content/uploads/2018/06/lupa-de-pesquisa-png-6.png

(y)

LuismedranoTi

Iconos del proyecto web
**Search ** https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png
Microfono https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png

Wladimir

ICONO de MICRO

https://inesh.org/blog/wp-content/uploads/2019/10/google-voice-search-increase-your-google-rank.png

ICONO de LUPA

https://images.vexels.com/media/users/3/132068/isolated/preview/f9bb81e576c1a361c61a8c08945b2c48-icono-de-b-squeda-by-vexels.png

Ángela Lobo

Pueden modificar la sombra de una forma más visual si van a la propiedad box-shadow en la herramienta de inspector de elementos.

Valeria Calcina Cisneros

Micrófono Primera Opción: https://upload.wikimedia.org/wikipedia/commons/e/e8/Google_mic.svg
.
Micrófono Segunda Opcion: https://www.pinclipart.com/picdir/big/32-322562_open-google-microphone-icon-clipart.png
.
Lupa: https://pngimage.net/wp-content/uploads/2018/06/lupa-de-pesquisa-png-6.png

Miguel Zabala Figueroa

Microfono https://www.cuecamp.com/wp-content/uploads/2019/11/Google_mic.svg_.png
Search https://cdn0.iconfinder.com/data/icons/very-basic-2-android-l-lollipop-icon-pack/24/search-512.png

César Andrés Aguilar Párraga

🔥🔥🔥Aquí les dejo los enlaces de los icons🔥🔥🔥
Buscador
Micrófono

Kevin Ariel Merino Peña

Cuando el profe dice pseudoelemento, en realidad se refiere :hover como pseudoclase

Joker11

Imagen de buscador:
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon_svg.png
Imagen de Micrófono:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/726px-Google_mic.svg.png

christian_sc96

¿Qué son las pseudo-clases?
Una pseudoclase se usa para definir un estado especial de un elemento.

Por ejemplo, se puede usar para:

Diseñe un elemento cuando un usuario pase el mouse sobre él
Estilo de enlaces visitados y no visitados de manera diferente
Dale estilo a un elemento cuando se enfoca

Francisco Salcedo

Aporte de box-shadow

Jhonnatan Salamanca

¿Que es mejor práctica?
*Almacenar las imágenes en una carpeta e invocarlas desde allí
*Copiar enlaces de imágenes subidas en la web

Sebastián Riátiga

URLs de los íconos

Search
Micro

Ernesto Briceño

#20212447 de color hexadecimal, se le escapo los ultimos dos digitos. sobran

Fernando Molano Castrillón

Para que no tengan que duplicar el código del micrófono y search, recomiendo hacer lo siguiente:

main .main-input .search-icon,
.micro-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px;
  height: 18px;
}
main .main-input .search-icon {
  background-image: url("https://img.icons8.com/android/24/000000/search.png");
}
main .main-input .micro-icon {
  background-image: url("https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png");
  cursor: pointer;
}

De esta forma, las propiedades que aplican a ambos, las escriben una sola vez, como por Ej: el ancho y alto, etc, pero la propiedad única como la url de la imagen si la separan. Es código resumido y un poco más limpio.

Cristopher Josue Alava Haro

Si quieren iconos, logos o imágenes transparentes cuando busquen una imagen pueden hacer lo siguiente:

Seleccionan tools(herramientas)
Les aparecerá un menú, seleccionan en que dice color
Luego seleccionan la opción de Transparente

Les saldrá todas las imágenes con fondos transparentes o en PNG espero les sirva mucho, ya que a mi si me a ayudado 😄

Luis Alejandro Vera Hernandez

Veo que para esto de ser frontend debes ser muy observador en los detalles. No se si seré el unico pero esa linea de color mas obscura en el borde al hacer el hover para mi fue imperceptible

Jesus Manuel Hernandez Diaz

Me pregunto por que no utilizo iconos de fuentes , como los ofrece la pagina fontawesome por ejemplo, bueno cada quien tiene su estilo supongo.

Sergio Alejandro González Sánchez

Para que no aparezca tan rápido la sombra le ponen el atributo
transition: 200ms all;

Anthony Guzman Lopez

https://commons.wikimedia.org/w/index.php?search=icon+search+google&title=Special%3ASearch&go=Go&ns0=1&ns6=1&ns12=1&ns14=1&ns100=1&ns106=1

En esta url se encuentra varios logos de Google entro otros:

David Moina

Si a alguien le surge el error al agregar los iconos del micrófono y la lupa que no se muestran y se les rompe el input, les comparto el error que yo había cometido en el HTML. Espero les sirva.
Error:

Solución:

Andy Antonio Paz Cambara

para los que no encuentran las imagenes se puede copiar el url de como lo isimos en la clase de el icono de el nav :3 suerte y lindo dia

Abraham Caso Torres

https://inesh.org/blog/wp-content/uploads/2019/10/google-voice-search-increase-your-google-rank.png

Abraham Caso Torres

https://images.vexels.com/media/users/3/132068/isolated/preview/f9bb81e576c1a361c61a8c08945b2c48-icono-de-b-squeda-by-vexels.png

José Luis Ramírez Ruiz

Le agregue el efecto hover que tiene el icono menú y la foto de perfil

Luis Alain

tengo un problema, los iconos del micrófono y la lupa no se muestran y se me rompe el input

Santiago Restrepo

En realidad la lupa si tiene una función. Creo que en realidad es un label, ya que en la página original de Google, al darle click a la lupa, automáticamente el input se inicia y espera que escriban en él.

Duver Arley Insignares Flores

No es necesario volver utilizar el cursor: pointer ya que se hicieron estilos generales de los enlaces
.

Gaudy Areli Cadenillas Saldaña

Así va hasta el momento 👀

Chema F.

Icono de Google Lend para quien haga el curso con las nuevas actualizaciones de Google Chrome
Link PNG Google Lend

Kevin Correa

Hola les quería recordar que la gran mayoria de veces las imagenes de una pagina vienen de un source externo por lo que podemos simplemente copiar ese source y utilizarlo:

Utilizmos el inspector con la imagen que necesetimos:

Eso nos mostrara la estructura html de la imagen incluyendo el atributo source/src:

Si colocamos el click sobre source nos desblegara una pequeña ventada que nos dara informacion sobre la imagen inlcuyendo el source:

si hacemos click sobre el curret source nos abrira una venta aparte que solo contiene la imagen:

podemos copiar la direccion de la pagina y utilizarla:

Jeremy Palomino

Solo queria aportar que se puede optimizar el este codigo que no tener que repetir esta parte:

main .main-input .search-icon {
	background-image: url(' ');
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
}

main .main-input .micro-icon {
	background-image: url(' ');
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
}

Podriamos optimizarlos así

main .main-input .search-icon,
main .main-input .micro-icon  {
	background-image: url(' ');
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
}

main .main-input .micro-icon {
	cursor:pointer;
}

David Behar

hoy aprendo que se puede poner al alfa en los colores hexadecimales agregando 2 dígitos, vientos, eso es nuevo

Wladimir

Hago una crítica a la falta de documentación en archivos y enlaces. Ya que si hubieran estado los enlaces de cada <img> nos habría AHORRADO la búsqueda en Google. Eso a la ve hubiera optimizado el tiempo del alumno y poner foco en lo que realmente importa.

Joel Vicente Nieto Gómez

Icono de busqueda de Google:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png

Icono del microfono de Google:
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png

Lucas Ramirez

me perdi, como hicimos para que cada icono se quede en su parte que corresponde (uno en cada esquina)?

Diana Carolina Torres Castaño

**Url icono lupa: **https://lh3.googleusercontent.com/proxy/hmYeKyPEzLBmSzUneDhOMOKxlsPtcl2nU8gAOp5fg_KqRosNQjPRRb7-AZ58J3mzPAp6YbNaWPzUxoLpqEUsgP9V4tCw4N-uuv8hyiEQfF8WAEd_4uV2SynrCKNXAfUfbvDE

url icono microfono: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/1200px-Google_mic.svg.png

Raúl Adolfo Sánchez Rodríguez

Paso a paso de la clase:

___
_________
________
_________
______
______
_________
________
______
________
________

Andrés González

¿CUANDO USAR ETIQUETA HTML img vs PROPIEDAD CSS background-image?

Tomado del siempre confiable stackoverflow(https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image/492834#492834):

Usos adecuados de IMG

Usa img si buscas que la gente imprima tu página y quieres que la imagen se incluya por defecto.
Usa img (con texto alt) cuando la imagen tenga un significado semántico importante, como un icono de advertencia. Esto garantiza que el significado de la imagen pueda ser comunicado a todos los usuarios, incluidos los lectores de pantalla.

Usos pragmáticos de IMG

Usa img mas el atributo alt si la imagen forma parte del contenido, como un logotipo, un diagrama o una persona (una persona real, no una foto de archivo).
Usa img si confías en el escalado del navegador para renderizar una imagen en proporción al tamaño del texto.
Usa img para las imágenes superpuestas múltiples en IE6.
El uso de img en lugar de background-image puede mejorar drásticamente el rendimiento de las animaciones sobre un fondo.

Cuándo usar CSS background-image

Usa CSS background-image si la imagen no es parte del contenido. -sanchothefat
Usa background-image CSS cuando se hace un reemplazo de imagen de texto, por ejemplo, párrafos/encabezados.
Usa background-image si quieres que la gente imprima tu página y no quieres que la imagen se incluya por defecto.
Usa background-image si necesitas mejorar los tiempos de descarga, como con los sprites CSS.
Usa background-image si necesitas que sólo una parte de la imagen sea visible, como con los sprites CSS.
Usa background-image con background-size:cover para estirar una imagen de fondo hasta llenar toda su ventana.

Edgar Jesus Carreño Layton

Imagen de microfono:
https://upload.wikimedia.org/wikipedia/commons/e/e8/Google_mic.svg
icono de lupa:
data:image/png;base64,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

Roy Joseph Rimachi Costillas

Creo que es mejor usar los archivos en formato SVG

SVG micro

<svg class="HPVvwb" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z" fill="#4285f4"></path>
  <path d="m11 18.08h2v3.92h-2z" fill="#34a853"></path>
  <path d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z" fill="#f4b400"></path>
  <path d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z" fill="#ea4335"></path>
</svg>

SVG lupa

<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>

Francisco Ezequiel Ferreyra

La sombra para el Hover

main .main-input-container:hover {
    box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
    border-color: rgba(223,225,229,0);
}

Alejandro Alberto Pachas Chavez

para los que no les sale los íconos porque quieren hacer casi todo por su cuenta, recuerden el display:flex en el div que contiene la lupa, el input y el micrófono

Kevin Alexander Lima Recinos

El Icono de Lupa es mejor este, me parece más: https://fedehr.github.io/google-homepage/lupa.png Lupa de Google

Alberto Gómez Juan

En el minuto 4:20, dandole estilo a la clase .main-container:hover ¿Por qué el color del box-shadow tiene más de 6 números (#20212447)?

Jhon Guevara

Paso el link de un simulador de sombras, muy bueno lo recomiendo mucho
https://www.cssmatic.com/es/box-shadow

Fabián Andrés García Méndez

Sombra de google:
box-shadow: 0 1px 6px rgba(32,33,36,.28);
border-color: rgba(223,225,229,0);

Jhonatan David Ibarra Lavado

estupendo 😄 muy bien se aprende demasiado

veca

hola , buen dia
mi pregunta es la siguiente, yo pensaba que los colores hexadecimales solo eran con 6 digitos , se pueden colocar mas de 6 como en el ejemplo de hover del inputP??? o es en ocasiones especiales??

Maria Auxiliadora Sanchez

main .main-input-container:hover{
    box-shadow: 0 1px 6px 0 #20212447;
    border-color: #dfe1e500;
}

main .main-input .search-icon{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon_svg.png') ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
}

main .main-input .micro-icon{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/726px-Google_mic.svg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
    cursor: pointer;
}```

Julian Mauricio Rivera Amaya

Box-shadow se aplica en el hover para dar sombreado al momento de pasar el cursor por encima del boton

JOSE DANIEL RAMIREZ PABON

Gracias por la explicación!

Antonio Beltrán

hace 2 meses

Solo cómo pequeña corrección: * Las Pseudoclases se diferencian por dos puntos ( : ), * Mientras qué los Pseudoelementos lo hacen con cuatro puntos ( :: ) Hover es una Pseudoclase, por sí algún estudiante se confundió o entró en dudas en el min 0:57. Sí hasta al profe Diego qué es un gran experto se le pasó, me hace tener más paciencia conmigo mismo, los invito a tenerse paciencia igual :)

LUZBY NADYN CUSACANI VENTURA

Fabian Augusto Bernardino

Google personalizado.

Alexis Perez

Hover no es un pseudoelemento, Hover es una pseudoclase!!!

Carlos Andrés Padilla Arroyo

Hover no es un pseudoelemento, es una pseudoclase…

Franciree Arellan

Un buen lugar para íconos es Flaticon

Rodrigo Taipe

Icono de micrófono: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png
Icono de lupa:
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png

Ali Hilario

¡He ahí el avance!

Pedro Isaac Aguilar

Pueden conseguir iconos en vectores svg y png en sitios como: https://www.iconfinder.com/

Santiago Ruberto

Asi me va quedando. Saludos de Argentina!

Andres Walteros

En vez de escribir todo esto:

    background-image: url('');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

Lo pueden hacer con el shorthand “background”, el cual acepta estos mismos valores con otros, pero NO acepta el background-size, el cual deben escribir en otra línea. Tomando en cuenta el ejemplo anterior quedaría de esta manera:

background: url('') no-repeat center;
background-size: contain;

Solo deben tomar en cuenta el orden con el que declaran los valores, el cual es el siguiente:

background-color
background-image
background-repeat
background-attachment
background-position

No es necesario escribir siempre todos, como vimos en el ejemplo se saltan algunos como

background-attachment

Entonces lo hace más fácil de usar.

Thay González

Tamaños según google:
lupa 20 x 20px
micrófono 24 x 24px

Danilo Francisco Espinoza Pino

Tuve un problema con mi navegador, como tenía abierto el dev tools, no se aplicaba mi hover effect a pesar de estar bien escrito. Para que funcionara usé ctrl+shift+M, es un botón como un cuadrado junto a un cuadrado más grande.
Eso o cerrar dev tools solucionó mi problema.
Saludos, espero haber ayudado a alguien.

Andres Velasquez

A mi criterio, no es necesario agregarle dentro de micro-icon la propiedad de

cursor: pointer;

porque ya habiamos agregado esa propiedad a nivel general para todas las

a{
    text-decoration: none;
    cursor: pointer;
}

Carlos Andasor

Un pequeño error que me sucedió, pero que quisiera compartir por si de pronto a alguien le sucede:

El Hover no me salía en toda la caja y al ver el código en CSS aparentemente estaba bien…

main .main-input-container :hover {
  box-shadow: 0 1px 6px 0 #20212447;
}

pero si se fijan el :hover está separado de la clase y aunque parece tonto, como principiante son cosas que no se ven a simple vista, ni se entienden y la solución es simplemente unir la clase con el hover sin espacio.

Eso de que un punto, un espacio o una letra puede dañar todo el código es cierto jeje de acá aprendo a ir afinando el ojo a estos pequeños errores 😉

Michelle Jacobsen Vasquez

No sé si más adelante lo arreglan, pero para que el texto en nuestro input y los íconos de los costados no se toquen, lo que hice fue achicar un poco el input y ponerle margin a los costados, así:

main .main-input input {
    width: 470px;
    height: 40px;
    border: none;
    outline: none;
    margin: 0 13px;
    font-size: 16px;
}

Y mi “.main-input-container” tiene un ancho de 565px, entonces el input con 470px y el margin lateral de 13px queda estupendo. También le subí un poco el tamaño de la tipografía, porque estaba por defecto a 13,3px en mi navegador, y a 16px me gustó más jajaja

Diego Oscar Temporetti

En lugar de cambiar el icono negro por otro gris, una opción es usar la propiedad “filter”, en el png para cambiar la “tonalidad” de la imagen y solo seria agregar la propiedad filter: contrast(20%) en nuestro “main .main-input .search-icon”

En este caso (fondo blanco) tambien servirá la propiedad filter: opacity

Darly Maryury Lozano Cruz

Para el hover de los botones en realidad estos son los estilos =

main .main-buttons div :hover {
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
    max-width: auto;
}

Alberto Montiel Reyes

otra forma de implementar los iconos en el input sin necesidad de descargar imagenes es con las etiquetas de html SVG aqui les dejo los 2 iconos con codigo svg (quiten los espacios entre los links solo impedian publicar el aporte)

La ventaja que tiene SVG es que no importa cuan grande o pequeña se escale la pantalla el icono mantendra su resolucion ademas que en las etiquetas “FILL” puedes declarar el color del icono, por si quieres ser diferente en tu proyecto le cambias el color a la lupa y a las partes del microfono.

Duvan Andres Angel Ochoa

background-image: url(“https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png”);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 18px;
height: 18px;

Dario Paladines

Por alguna extraña razon puse las mismas instrucciones que el profe, pero mis iconos de lupa y micrófono no se centraron, tuve que colocarle un margin top ahí calculando a c/u para que quede centrado, supongo que en esos casos toca buscar alguna solución como esa igual y no es tan mala práctica.

Osvaldo Olea

Por si a alguien tiene el mismo probelmas con hover.

main .main-input-container:hover{
box-shadow: 0 1px 6px 0 #20212447; (correcto sin espacio entre container y hover)

main .main-input-container: hover{
box-shadow: 0 1px 6px 0 #20212447; Con el espacio hacia hover sobre cada elemento por separado y no a la caja completamente.

Vittorio Carlos Toledo Huarez

En esta parte, agregale un padding para que al momento de escribir en el input no este tan pegado al ícono de la lupa

PabloGM

Si quieren incrustar imagenes con url’s muy largas pueden usar este sitio para acortarlos gratis y que lleven a la misma imagen

Sergio Reyes

Esas Url gigantes son por que la imagen aun no a sido cargada desde Google, mas bien es la Thumbnail

Recomiendo usar un acortados de Enlaces como Tinyurl asi tienen sus links cortos y ordenados!

Alexander Garzon

Me gusta mas la ruta para las imagenes.

Jose Orlando Parra Soto

buenos tips

Hector L. Santiago Perez

Si creo que lo pude hacer bastante parecido al google de ayer.)

marvcoder

Hay que mejorar el search-icon, agregando un padding-right, para que tenga un mejor efecto visual al momento de escribir en el input. Ya que se vee muy pegada, como lo dejaron.

JoshuaGRD

Y cada vez más pulido…

hmogollan

va muy bien el proyecto, a seguir aprendiendo!

Javier Wladimir Chicaiza Reyes

Desde el inspector se pueden conseguir los svgs de los íconos

fabricio spiritosi

Dejo por las URL de los icons.

Search: ‘https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png’

Micro:
‘https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png’

Marianela Ruiz depablos