Usar a Font Awesome no HubSpot

A Font Awesome é uma fonte de ícones de vetores dimensionáveis que podem ser personalizados por tamanho, cor e qualquer outro atributo que possa ser alterado com CSS. Os dois métodos mais comuns de usar a Font Awesome no HubSpot são:

• Uso do campo de ícone em módulos personalizados
• Uso de um kit de Font Awesome

Observação: Os ícones da Font Awesome não funcionam no e-mail porque a maioria dos clientes de e-mail não renderiza as fontes da Web. Para usar ícones em um e-mail, você precisará converter os ícones em imagens e inserir as imagens no editor de e-mail. 

Usar o campo de ícone em módulos personalizados

Você pode escolher entre os ícones pré-instalados do Font Awesome, adicionando um campo de ícone aos seus módulos personalizados. Para adicionar um campo de ícone a um módulo personalizado:

• Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
• No localizador na barra lateral esquerda, selecione um módulo personalizado existente. Ou crie um novo módulo personalizado.
• Adicione um campo de ícone ao módulo clicando em Adicionar campo na barra lateral direita e selecionando Ícone.
  
  
• Você pode personalizar o campo configurando valores padrão e opções de editor. Saiba mais sobre como personalizar campos de módulo.
• Adicione o campo de ícone ao corpo do módulo posicionando o mouse sobre o campo na barra lateral direita e clicando em Ações. Selecione Copiar snippet e cole o snippet na seção HTML + HUBL em que deseja que o ícone apareça.
  
  
• No canto superior direito, clique em Publicar.
• Se esse for um novo módulo, adicione o módulo a qualquer modelo em que deseja usar os ícones. Clique em Publicar no canto superior direito para publicar as alterações do modelo.
• Agora você pode selecionar os ícones do Font Awesome no seu módulo personalizado, tanto do gerenciador de design quanto do editor de páginas.
  
  

Usar um kit de Font Awesome

Você pode adicionar ícones da Font Awesome no seu site criando um kit de Font Awesome, adicionando o código ao seu cabeçalho HTML e depois adicionando os ícones à sua página. Saiba mais sobre os kits de Font Awesome.

• Comece criando um kit no site da Font Awesome. Depois de criar um kit, você receberá uma linha de código que pode adicionar ao HubSpot. O código será semelhante a:

  <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

• No HubSpot, cole o código do kit no seu site HTML. Isso tornará a Font Awesome disponível em todas as páginas, dependendo do subdomínio que você escolher ao editar o HTML principal do site. Para adicionar a Font Awesome a apenas uma página, você pode adicionar o código do kit a um HTML principal de página individual.

Adicionar ícones à sua página

Para adicionar um ícone a uma página, você precisará editar o HTML do conteúdo para atribuir as classes de Font Awesome aos seus elementos. No HubSpot, isso pode significar a edição de um módulo personalizado ou um arquivo codificado, a edição de um modelo de blog ou a edição do código-fonte de um módulo rich text no editor de páginas. 

Cada ícone tem duas partes na declaração de classe:

• O nome do ícone, prefixado por fa-. Por exemplo: fa-camera
• O prefixo de estilo. Por exemplo, fas. 

Para ícones de marca, como o Facebook, você precisará usar o prefixo de estilo fab. Por exemplo:

class="fab fa-facebook"

Você pode usar um <i> elemento ou <span> elemento ao inserir os ícones. No exemplo abaixo, ambos os métodos funcionam:

<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>

Saiba mais sobre as noções básicas de como usar os ícones de Font Awesome no seu conteúdo.

Ícones da Font Awesome hospedada pela HubSpot