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. Para instalar a Font Awesome no HubSpot, você deve se sentir confortável editando as folhas de estilo no seu site.

• Copie todo o código deste arquivo HubSpot-hosted font-awesome (v4.1.0).
• Abra o gerenciador de design. Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
• Abra a folha de estilo aplicada ao seu conteúdo e cole o código copiado da etapa acima. Se você não tem certeza sobre qual estilo você deseja atualizar, saiba como encontrar o estilo de um conteúdo específico.
• Clique em Publicar alterações para atualizar sua folha de estilo. Saiba mais sobre como usar a Font Awesome no seu conteúdo aqui.

Como alternativa à cópia do código da Font Awesome hospedado pela HubSpot, você pode colar o mesmo código no campo HTML do cabeçalho do site nas configurações ou na seção HTML de uma tag de cabeçalho de uma página específica.

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:

<h2>Font Awesome Icons Example</h2>
<ul class="fa fa-ul">
<li><span class="fa fa-twitter"></span>Twitter Icon</li>
<li><span class="fa fa-list-ul"></span>List Icon</li>
<li><span class="fa fa-camera-retro fa-lg"></span>Camera Icon</li>
</ul>

Í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.