Guias/Criar conteúdo/Design/Adicionar um ícone a um botão

Adicionar um ícone a um botão

Você pode adicionar ícones ou imagens aos botões, como um ícone de telefone (📞) para botões de clique para ligar, um ícone de e-mail (📧), setas (⬅️ ➡️) para botões de “Leia mais” ou qualquer coisa que você possa imaginar. Saiba como adicionar ícones a botões neste guia.

Encontrar ícones para usar

Há muitos sites onde você pode encontrar imagens ou ícones que você pode usar em seu site. Alguns exemplos incluem:

  • A maioria dos dispositivos móveis e sistemas Windows e Mac têm emojis integrados que podem ser adicionados aos botões.
  • Você também pode copiar emojis de sites como Get Emoji.
  • O Google Fonts inclui uma opção de ícones.
  • Font Awesome é um site popular que tem ícones gratuitos e pagos.

Se estiver usando uma imagem, recomendamos usar tipos de arquivo SVG ou PNG (transparentes). Você pode fazer upload do ícone para sua Biblioteca de mídia antes de adicionar o botão, ou enviar o ícone conforme adiciona o botão (descrito abaixo).

Adicionar um ícone a um botão

Você pode adicionar um ícone ou imagem a um botão no WordPress.com usando o bloco de botões e um ícone de sua escolha. Para adicionar um ícone a um botão, siga estas etapas:

  1. Adicione um botão e inclua o texto e o link do seu botão.
  2. Clique no botão e posicione o cursor antes ou depois do texto.
  3. Dependendo se você está usando um emoji ou uma imagem:
    • Emoji: use o atalho do teclado para Windows ou Mac e selecione o emoji. Ou copie e cole os emojis de um site como o Get Emoji.
    • Imagem: na barra de ferramentas exibida, clique na seta para baixo (Mais) e selecione a opção Imagem embutida.
      • Escolha sua imagem na Biblioteca de mídia ou faça upload de uma nova imagem.
      • Clique duas vezes na imagem para alterar o tamanho da imagem e adicionar o texto alternativo.
  4. Clique em Salvar ou Publicar para salvar as alterações.

O exemplo a seguir usa o atalho de teclado do Mac para adicionar um emoji. Você também pode usar o atalho de teclado do Windows ou copiar e colar um emoji de outro site.

Copied to clipboard!