Instale 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. Há duas maneiras de usar o Font Awesome no HubSpot:

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.
  
  

Instalar e usar o Font Awesome manualmente

Para instalar o Font Awesome no HubSpot, é necessário estar familiarizado com a edição de folhas de estilo no seu site. Para instalar e usar o Font Awesome manualmente no HubSpot, primeiro será necessário carregar o Font Awesome no gerenciador de arquivos e, depois, atualizar os elementos HTML para usar as classes do Font Awesome.

 Carregar a Font Awesome no gerenciador de arquivos

• Baixe a versão da Font Awesome que deseja usar no HubSpot de http://fontawesome.io/ e descompacte a pasta no computador.
• Abra o arquivo font-awesome.css e copie seu conteúdo.
• Cole o conteúdo desse arquivo em uma folha de estilos no HubSpot.
• Abra uma nova guia no navegador para acessar o gerenciador de arquivos. Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Arquivos.Aqui, você poderá carregar todos os arquivos de fonte Font Awesome referenciados na seção Caminho da fonte do CSS da Font Awesome.
• Depois de carregar esses arquivos para o gerenciador de arquivos da HubSpot, copie as URLs de cada arquivo e substitua TODOS os links relacionados em seu CSS por cada URL do gerenciador de arquivos do arquivo correspondente. Seu código será parecido como isso, exceto que você verá os URLs que você copiou do seu próprio arquivo:

/* CAMINHO DA FONTE
 * -------------------------- */
@font-face {
 font-family: 'FontAwesome';
 src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?v=4.7.0');
 src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn2.hubspot.net/hubfs/HUBID/Font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

• Clique em Publicar alterações na sua folha de estilo quando toda as URLs relacionadas forem substituídas.

Usar a Font Awesome

Depois de referenciar a versão hospedada pela HubSpot da Font Awesome ou envie seus próprios arquivos para seu portal, você estará pronto para usar a Font Awesome no seu conteúdo. A Font Awesome será aplicada aos elementos com class="fa" e uma classe específica para o ícone que você gostaria de renderizar.

Por exemplo:

class="fa fa-facebook"

Observe que os ícones da Font Awesome não funcionam em e-mails. Além disso, esteja ciente de que os elementos não podem ser usados com o código fonte dos editores WYSIWYG da HubSpot. Ao implementar os ícones da Font Awesome, é recomendável usar tags como as do exemplo abaixo:

Font Awesome Icons Example

• Twitter Icon

• List Icon

• Camera Icon

Ícones da Font Awesome hospedada pela HubSpot

Observação: a versão hospedada pela HubSpot da Font Awesome não é mantida atualizada. Se quiser usar ícones mais recentes, você deverá carregar seus próprios arquivos de fonte para o gerenciador de arquivos e substituir a referência @font-face por src urls.