erro no aparecimento dos icones | HTML5 e CSS3 II: Turbinando as suas páginas

Icones não aparecem.

<!DOCTYPE html>
<html lang="pt">
    <head>
    </head>
    <body>
        <main>
            <h1 class="titulo-principal">Contato</h1>
            <div  class="container">
                <form>
                    <fieldset>
                        <legend>Seus Dados</legend>
                        <label class="com-icone" for="nome-contato">Nome <input type="text" name="nome-contato" required autofocus pattern="[A-Za-z0-9 ']{4,}" title="O nome precisa ter 4 letras"></label>
                        <label class="com-icone" for="email-contato">E-mail <input type="email" name="email-contato" required placeholder="Digite seu e-mail"></label>
                    </fieldset>
                    <fieldset>
                        <legend>Assunto</legend>
                        <label><input type="radio" name="assunto" value="Consultoria">Consultoria</label>
                        <label><input type="radio" name ="assunto"value="Blog">Blog</label>
                        <fieldset>
                            <input type="radio" name="assunto" value="Outro" id="outro">
                            <label for="outro">Outro</label>
                            <input type="text" name="outro-assunto">
                        </fieldset>
                        <label for="mensagem">Mensagem <textarea name="msg" id="mensagem" cols="60" rows="10" placeholder="Digite aqui sua mensagem"></textarea></label>
                        <button type="submit">Enviar mensagem</button>
                    </fieldset>
                </form>
            </div>    
        </main>
        <img src="img/eu.jpg" alt="Minha Foto" class="minha-foto">
        <aside class="navegacao-site">
        </aside>
        <footer class="rodape-pagina">
            &copy; Joao da Silva 2014
        </footer>
    </body>
</html>

CSS:

legend, label[for="mensagem"] {
    font-weight: bold;
    margin-top: 1em;    
}

label[for] {
    display: block;
}

input[type="text"],
input[type="email"],
textarea {
    /* Força o navegador a usar a mesma fonte da página */
    font-family: inherit;
    /* Inclusive o tamanho dela */
    font-size: 100%;
    padding: .25em 5.em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #CCC;
}

/* alguns ajustes para o campo "Outro": deixar ele na mesma linha */
fieldset > fieldset {
    display: inline;
}

/* deixar o rótulo dele inline de novo */
label[for="outro"] {
    display: inline;
}

/* deixar só esse campo sem ocupar a tela toda */
input[name="outro-assunto"] {
    width: auto;
}

input:focus,
textarea:focus {
    background-color: #FFD;
}

input:invalid {
    box-shadow: 0 0 3px;
}

button {
    /* Precisamos tirar a borda que o navegador coloca por padrão */
    border: 0;
    padding: .5em 1em;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2em;
    /* Faz com que o botão apareça na direita */
    margin-left: auto;
    margin-top: 1em;  
    display: block;
}

button:hover,
button:focus {
    background-color: #8C1D3D;
}

input[value="Outro"] ~ input {
    display: none;
}

input[value="Outro"]:checked ~ input {
    display: inline;
}

.com-icone::after {
    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;
    position: absolute;
    top: 100%;
    left: 0;
}

.com-icone {
    position: relative;
}

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

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

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