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!