1
resposta

DÚVIDAS DE COMO ALINHAR TEXTO COM ÍCONE

Boa noite pessoal, consegui criar ícones no rodape da forma como eu queria, contendo email, telefone, local e tal. Como eu coloco emai ao lado do ícone? e os demais tbem ao lado de seus respectivos itens? Poderiam me ajudar?

PARTE HTML:

<div class="share">
<tr>
    <td><a  class="fas fa-envelope"></a></td>
    <span>farm.healer@dominio.com</span>
</tr>
<tr>
    <td><a  class="fas fa-phone"></a></td>
    <span>(22) 9 2222-2222</span>
</tr>
<tr>
    <td><a  class="fas fa-city"></a></td>
    <td>
        <table>
            <tr>
                <td>
                    <p>LOJA Cabo Frio:</p>
                    <p>RUA 1, PRAIA</p>
                    <p>CABO FRIO, RJ</p>
                    <p>CEP 34567-890</p>
                </td>
                <td>
                    <p>LOJA Búzios:</p>
                    <p>RUA 2, COQUEIRO</p>
                    <p>BÚZIOS, RJ</p>
                    <p>CEP 34567-890</p>
                </td>
                <td>
                    <p>LOJA Arraial do Cabo:</p>
                    <p>RUA 3, AREIA</p>
                    <p>ARRAIAL DO CABO, RJ</p> 
                    <p>CEP 34567-890</p>
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td><a  class="fas fa-clock"></a></td>
    <span>Segunda a Sexta: 9h às 22h<br>
        Sábado: 9h às 22h</span><br>
</tr>
</div>

<div class="links">
    <a href="#home">INÍCIO</a>
    <a href="#about">SOBRE A HEALER</a>
    <a href="#products">PRODUTOS</a>
    <a href="#contact">FALE CONOSCO</a>
</div>

<div class="credit"><td>&copy; 2023 Farmácia HEALER</td> | Todos os direitos reservados</div>

PARTE CSS

.footer{ background:var(--blue); text-align: center; }

.footer .share{ padding:1rem 0; }

.footer .share a{ display: flex; flex-direction: column; align-items: center; height: 5rem; width: 5rem; line-height: 5rem; font-size: 2rem; color:#fff; border:var(--border3); margin:.3rem; border-radius: 50%; margin: 0.3rem 0; }

.footer .share a:hover{ background-color: var(--main-color); }

.footer .links{ display: flex; justify-content: center; flex-wrap: wrap; padding:2rem 0; gap:1rem; }

.footer .links a{ padding:.7rem 2rem; color:#fff; border:var(--border3); font-size: 2.5rem; }

.footer .links a:hover{ background:var(--main-color); }

.footer .credit{ font-size: 2rem; color:#fff; font-weight: lighter; padding:1.5rem; }

1 resposta

Boa noite Douglas, tudo bom?

Tem como disponibilizar esse projeto no github para eu conseguir analisar o código mais a fundo?