Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ícones não aparecem

Oi pessoal, tudo bem?

Estou com problemas no meu código e não consigo encontrar a solução, já vi um tópico com essa mesma dúvida aqui mas testei a solução sem sucesso, podem me ajudar por gentileza?

HTML:

<form>
                <fieldset>
                    <legend>Seus dados</legend>
                    <label for="nome" class="com-icone">Nome completo</label>
                    <input id="nome" type="text" name="nome" required autofocus pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres">
                    <label for="email" class="com-icone">E-mail</label>
                    <input id="email" type="email" name="email" required placeholder="seu@email.com">
                </fieldset>
                <fieldset>
                    <legend>Assunto</legend>
                    <label>
                        <input type="radio" name="assunto" value="Blog">
                        Blog
                    </label>
                    <label>
                        <input type="radio" name="assunto" value="Serviço">
                        Serviço
                    </label>
                    <fieldset>
                        <input type="radio" name="assunto" value="Outro" id="outro">
                        <label for="outro">
                            Outro
                        </label>
                        <input type="text" name="outro-assunto">
                    </fieldset>
                </fieldset>
                <label for="mensagem">Mensagem</label>
                <textarea id="mensagem" name="mensagem" cols="60" rows="10" placeholder="Digite aqui sua mensagem"></textarea>
                <button type="submit">Enviar mensagem</button>
            </form>
CSS:

 /* adicionamos essa classe aos rótulos que terão ícone */
.com-icone::after {
    content: '' /* não esquecer do content! */
    width: 2em;
    height: 2em;
    background-color: #8C1D3D;
    background-size: 50% 50%; /* para a imagem ter 1em x 1em; */
    background-position: center;
    background-repeat: no-repeat;
}

.com-icone {
    position: relative;
}

.com-icone::after {
    position: absolute;
    top: 100%;
    left: 0;
}

.com-icone + input {
    position: relative;
    left: 2em;
}

.com-icone + input {
    width: calc(100% - 2em);
}

.com-icone[for="nome"]::after {
    background-image: url(../imagens/usuario.png);
}

.com-icone[for="email"]::after {
    background-image: url(../imagens/email.png);
}

Valeu pessoal!

3 respostas
solução!

Boa tarde, Fiama! Como vai?

Pode ser que o caminho para as imagens esteja incorreto. Vc poderia compartilhar o seu projeto completo pelo github, google drive, dropbox ou outro e mandar o link aqui para eu dar uma olhada? Daí eu dou uma olhada e vejo o que está acontecendo!

Grande abraço e bons estudos!

Muito obrigada pela ajuda Gabriel Leite,

eu mexi no caminho das pastas e era isso mesmo =)

Muito obrigada mais uma vez. Abraços!

Por nada! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!