Introdução: Como criar links de e-mail, telefone e mensagem com ícones em HTML

Os links em HTML são recursos fundamentais para facilitar a navegação dos usuários no seu site. Você sabia que pode tornar esses links ainda mais atraentes usando ícones com o FontAwesome? Vamos aprender a criar links interativos para enviar e-mails, fazer chamadas telefônicas e enviar mensagens, tudo com ícones para deixar seu site mais moderno e intuitivo.

Antes de começarmos, é importante que você saiba como criar um arquivo HTML básico. Se precisar de ajuda, confira este tutorial:

Além disso, se quiser aprender mais sobre como usar links em HTML, sugerimos a leitura deste post completo sobre o assunto:

Passo a passo para criar um arquivo HTML básico

Crie um arquivo chamado index.html em sua pasta de sua escolha, pode ser em qualquer lugar no seu computador ou celular.

Adicione a estrutura básica de um documento HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links Interativos com FontAwesome</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <h1>Links Interativos com Ícones</h1>
</body>
</html>

Salve o arquivo e abra-o no navegador para verificar se está tudo funcionando.

Agora que você tem sua página HTML pronta, vamos adicionar os links interativos um por um, orientando você a salvar e recarregar a página a cada passo para visualizar as alterações.

Criando Links de E-mail com Ícones

Vamos adicionar um ícone ao link de e-mail para deixá-lo mais interessante.

Exemplo de Link de E-mail com Ícone:

Adicione o código abaixo dentro da tag body do arquivo index.html criado.

<a href="mailto:jack@abc.com">
    <i class="fa fa-envelope"></i> Enviar E-mail
</a>

Neste exemplo, usamos o ícone de envelope do FontAwesome (fa-envelope) para representar o e-mail. Isso torna o link mais intuitivo e visualmente agradável. Ao clicar, o cliente de e-mail padrão do usuário será aberto.

Dica: Não esqueça de salvar seu arquivo index.html e recarregar a página no navegador para ver como o ícone aparece ao lado do link de e-mail.

Criando Links de Telefone com Ícones

Agora, vamos criar um link para chamadas telefônicas usando um ícone de telefone.

Exemplo de Link de Telefone com Ícone:

<a href="tel:+12345678">
    <i class="fa fa-phone"></i> Ligar Agora
</a>

O ícone de telefone (fa-phone) torna claro que o link é para uma chamada. Quando o usuário clicar nesse link, o dispositivo abrirá o aplicativo de chamadas.

Dica: Sempre salve e atualize sua página no navegador para visualizar as mudanças!

Criando Links para Enviar Mensagens de Texto com Ícones

Vamos finalizar com um link para enviar uma mensagem de texto, usando um ícone de mensagem.

Exemplo de Link para Enviar Mensagens com Ícone:

<a href="sms:+12345678&body=ha%20ha">
    <i class="fa fa-comment"></i> Enviar Mensagem
</a>

Aqui, usamos o ícone de mensagem (fa-comment) para indicar que o link é para enviar uma mensagem de texto. Ao clicar, o aplicativo de mensagens abrirá com o número e o corpo da mensagem já preenchidos.

Dicas e Boas Práticas para Usar Links Interativos com Ícones

  • Mantenha a clareza visual: Usar ícones ajuda os visitantes a identificar rapidamente a ação que será executada ao clicar no link.
  • Teste em diferentes dispositivos: Certifique-se de que os ícones e links funcionem corretamente em celulares, tablets e computadores.
  • Acessibilidade: Garanta que os ícones sejam compreensíveis para todos os usuários, incluindo aqueles que utilizam leitores de tela.

Conclusão

Adicionar ícones aos links de e-mail, telefone e mensagem é uma maneira excelente de tornar seus links mais atraentes e funcionais. Os ícones melhoram a experiência do usuário e deixam seu site com um visual mais moderno e intuitivo. Experimente essas técnicas e veja como elas podem elevar o nível do seu projeto!

 

Dúvidas?

Pergunta: O que é FontAwesome e por que devo usá-lo em meus links HTML?

Resposta: FontAwesome é uma biblioteca de ícones que permite adicionar ícones estilizados aos seus projetos HTML. Usar ícones melhora a aparência dos links e ajuda os usuários a identificarem rapidamente a função do link, como enviar um e-mail ou fazer uma chamada.

 

Pergunta: Como posso adicionar a biblioteca FontAwesome ao meu projeto HTML?

Resposta: Você pode adicionar a biblioteca FontAwesome ao seu projeto incluindo uma linha no <head> do seu HTML, como mostramos no post. Se precisar de ajuda para começar, consulte este guia completo sobre Como usar ícones FontAwesome em HTML.

 

Pergunta: O que acontece se o usuário clicar em um link de telefone no desktop?

Resposta: Se o usuário clicar em um link de telefone (tel:) em um desktop, nada acontecerá a menos que ele tenha um software de chamada configurado. Esse tipo de link é mais útil em dispositivos móveis.

 

Pergunta: Qual é a diferença entre links internos e externos?

Resposta: Links internos são usados para navegar dentro do próprio site, enquanto links externos direcionam para páginas fora do seu site. Ambos são importantes para criar uma navegação eficiente e amigável para o usuário.

 

Pergunta: Como faço para remover a formatação padrão de um link HTML usando CSS?

Resposta: Você pode remover a formatação padrão de um link HTML usando CSS com o seguinte código:

a {
    text-decoration: none;
    color: inherit;
}

Isso remove o sublinhado e usa a cor do texto definida no seu layout.

 

Pergunta: Posso usar links de e-mail e telefone em qualquer dispositivo?

Resposta: Sim, você pode usar links de e-mail e telefone em qualquer dispositivo, mas é importante lembrar que eles funcionam melhor em dispositivos móveis, que já têm aplicativos de e-mail e telefone instalados. Caso esteja em um computador, ele poderá selecionar aplicativos com os mesmos objetivos.

 

Pergunta: É possível personalizar os ícones de FontAwesome que uso nos links?

Resposta: Sim, você pode personalizar os ícones FontAwesome com CSS para mudar sua cor, tamanho, entre outros estilos. Por exemplo:

.fa-envelope {
    color: blue;
    font-size: 20px;
}

 

Pergunta: Como posso garantir que os links sejam acessíveis para todos os usuários?

Resposta: Garanta que os links sejam claros e descritivos. Evite usar textos genéricos como "Clique aqui". Inclua descrições como "Enviar E-mail" para ajudar os leitores de tela a entenderem a função do link.

 

Pergunta: Por que meus ícones de FontAwesome não aparecem?

Resposta: Certifique-se de que você incluiu corretamente o link para a biblioteca FontAwesome no <head> do seu HTML. Se os ícones ainda não aparecerem, pode ser um problema de conexão ou de versão desatualizada.

 

Pergunta: Links de mensagem funcionam em todos os dispositivos?

Resposta: Links de mensagem (sms:) são mais eficazes em dispositivos móveis, pois são projetados para abrir o aplicativo de mensagens. Em desktops, esses links não funcionam sem software específico.

 

E aí, pronto para colocar esses links interativos em ação? Lembre-se, a prática leva à perfeição! Então, nada de só ler o conteúdo! Vá lá, teste no seu código e veja a mágica acontecer. E lembre-se, se você errar, faz parte do processo. Afinal, até os melhores desenvolvedores já erraram muito!