No penultimo exercicio do capitulo 10 ficou faltando incluir e posicionar os icones ao lado dos inputs do campo nome e email. Alguem implementou?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
No penultimo exercicio do capitulo 10 ficou faltando incluir e posicionar os icones ao lado dos inputs do campo nome e email. Alguem implementou?
Sim, qual a sua dúvida?
Reginaldo essa opção da label ficar ao lado da input é chamado de form-group, para implementa-la você deve utilizar os displays de table.
.form-data-group {
display: table;
}
.form-data-group .form-data {
border-right: 0;
padding: 1rem;
}
.form-data-group-text {
background: #F2F2F2;
border: 1px solid #DCDCDC;
box-sizing: border-box;
display: table-cell;
font-size: .8rem;
line-height: 0;
padding: 1rem;
text-align: center;
vertical-align: middle;
white-space: nowrap;
width: 1%;
}Basicamente o css seria esse, eu utilizo e funciona corretamente, ai no html ficaria assim:
<div classs="form-data-group">
<input class="form-data">
<span class="form-data-group-text">Teste</span>
</div>Basta realizar as modificações a seu gosto.
Espero ter ajudado.
Certo. Eu implmentei usando o seguinte CSS que inclui o icone dentro do input:
input[name="nome"] {
background-image: url(../imagens/people-ico.png);
background-repeat: no-repeat;
}Ocorre que eu estou tentando implementar o icone fora do input ao lado do mesmo. Já tentei flutuar tanto a imagem quanto o input, porém sem êxito. Alguém pode me orientar?
Reginaldo o código que eu postei faz exatamente isso, ele deixa label's ao lado dos input's, para fazer esse tipo de recurso você precisa ter uma div pai englobando o input com a label.
<div class="form-group">
// input e label
</div>Ai nessa div pai você precisa definir o display: table, agora dentro da div.form-group defina o input com width: 100% e crie uma outra div para ser alinhada ao lado da input.
<div class="form-group">
<input>
<span class="form-data-group-element"></span>
</div>Nessa div .form-data-group-element defina o display: table-cell e width: 1%, dentro dela ficara um botão, um ícone, uma label.
Obs: Siga o exemplo que eu ja havia postado, ele faz exatamente o que você esta precisando.
Espero ter ajudado