.banner__pesquisa::placeholder {
font-family: var(--fonte);
font-size: 14px;
font-weight: 400;
text-align: center;
background: url("../");
}
.banner__pesquisa::placeholder {
font-family: var(--fonte);
font-size: 14px;
font-weight: 400;
text-align: center;
background: url("../");
}
Oi, Matheus, tudo bem com você?
Faltam apenas alguns detalhes que precisam ser ajustados para que o ícone da lupa apareça corretamente. Primeiro, adicione o caminho do arquivo dentro do url()
, que está incompleto. Por exemplo:
background: url("../img/Lupa.svg") no-repeat;
Depois, acrescente também o background-position para definir a posição do ícone dentro do placeholder:
background-position: 1em;
E também adicione a propriedade color para garantir visibilidade do texto do placeholder, por exemplo:
color: var(--branco);
No fim, seu código deve ficar similar a esse:
.banner__pesquisa::placeholder {
font-family: var(--fonte-principal);
font-size: 14px;
font-weight: 400;
text-align: center;
color: var(--branco);
background: url("../img/Lupa.svg") no-repeat;
background-position: 1em;
}
Com esses ajustes, o ícone deve aparecer normalmente.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)