Skip to main content
1 de 3

como adicionar ícones antes do placeholder

Eu estou trabalhando no front de um login e estou querendo inserir os ícones de contato para o campo de e-mail e o de cadeado para o de senha. Quero inserir antes da mensagem do placeholder. Eu não estou utilizando Bootstrap. Teria como fazer isso com os seletor ::before? e teria como também utilizar algo análogo ao :nth-child() na hora de passar o endereço desses ícones?

body {
    margin: 0px;
    padding: 0px;
}

.login {
    margin: auto;
    width: 350px;
    height: 540px;
    margin-top: 50px;
    background-color: #cc252f;
    position: relative;
}

.fields {
    margin: auto;
    width: 240px;
    height: 100px;
}

.fields input {
    font-size: 1em;
    width: 98%;
    height: 46%;
    padding-left: 5px;
    margin-top: 2px;
    border-radius: 5px; 
    border: 0px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="_css/newlogin.css">
    <title>HEMOGRAM</title>
</head>

<body>
  <div class="login">
    <div class="fields">
      <input type="email" maxlength="30" name="email" id="email" placeholder="e-mail"><br>
      <input type="password" maxlength="16" name="pwd" id="pwd" placeholder="senha">
    </div>
  </div>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

uma logo e um título antecede esses campos, mas não coloquei aqui por razões confidenciais (espero que entendam).

Desde já agradeço qualquer tipo de ajuda rapazes!