Imagem e textos desordenados | HTML5 e CSS3 I: Suas primeiras páginas da Web

Olá pessoal!

Após ter compreendido como funciona a técnica de substituição por imagem e te-la aplicada corretamente como ensina na vídeo-aula, fui tentar aplica-lá a minha maneira. Tentei adicionar um pequeno ícone para ficar do lado esquerdo da palavra "Tag" para usar na página blog.html do curso, mas não deu certo. Ficou totalmente desodenado não sei como alinhar isso:

Não sei se apliquei a classe no lugar correto e se acertei em usar a tag <div> para fazer tal coisa. Meu código HTML está assim:

                <article>
                    <h2>O essencial de design responsivo</h2>
                    <time datetime="2014-07-01">01 de julho de 2014</time>
                    <p>Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
                    <a href="#" class="leia-mais">Leia mais</a>
                    <footer><div class="tags">Tags:</div> <a href="#">design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></footer>
                </article>

CSS:

article {
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.leia-mais {
    font-size: 22px;
    padding: 8px;
    margin: 16px;
    display: block;
    text-align: center;
    background-color: #E6E7E8;
}

.tags {
    background: url(tag.png) no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
}

Fiquei perdido em como resolver, alguém pode me ajudar?

Fala Luiz, tudo bom?

Do que você mandou, um ponto que precisaria ser alterado é a parte do seletor de .tags

.tags {
    background: url(https://placehold.it/20x20) no-repeat;
        padding-left: 25px;
    display: inline-block;
}

E fazer com que todos os elementos dentro do footer tenham inline-block para que eles tenham o comportamento de ficar alinhadinhos sem pular um por cima do outro, caso tenha alguma dúvida deixo meu artigo favorito sobre o assunto: https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-block-4e6cba2f19d4

Como você criou um texto que ficou maior do que os 20px de largura e altura que você tinha definido a tag estava com um comportamento meio diferentinho comprimindo tudo. Só removi essas definições e coloquei um padding-left, para que todo o conteudo seja empurrado e o background fique aparecendo normal na esquerda.

Dando um exemplo me baseando no que você bolou de como eu criaria a sua lista me baseando em alguns pontos de semântica, e tirando sua dúvida das tags ficaria algo assim:

<footer>
    <h3><span class="icone">Significado do Icone para Acessibilidade</span> Tags</h3>
    <li>
        <a href="#1">design responsivo</a>
        <a href="#2">mobile</a>
        <a href="#3">css</a>
    </li>
</footer>

Footer primeiro em volta de tudo;
O título da lista eu coloquei em uma tag de heading com uma importância mais baixa;
Os links ao invés de deixar soltos, deixei agrupados em uma lista

Para criar o icone, coloquei em uma tag span, pois é mais genérica que a div e é bastante usada nesses casos e nos frameworks css da vida como o Bootstrap.

Para estilizar no CSS deixei assim:

.icone {
    background: url(https://placehold.it/20x20);
        background-repeat:no-repeat;
    display: inline-block;
        width: 20px;
        height: 20px;
        text-indent: 99999px; /* empurra o texto para deixar só o icone */
    overflow: hidden; /* texto que for empurrado pra fora não aparece vazado */
}

footer > * {
    display: inline-block;     /* todos os elementos filhos do footer recebem inline-block */
}

E aqui o link para você visualizar :) https://codepen.io/soutomario/pen/zEpYMz

Mergulhe em programação