Usar a Font Awesome no HubSpot
Ultima atualização: Outubro 19, 2020
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
adjust anchor archive arrows arrows-h arrows-v asterisk ban bar-chart-o barcode bars beer bell bell-o bolt book bookmark bookmark-o briefcase bug building-o bullhorn bullseye calendar calendar-o camera camera-retro caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up certificate check check-circle check-circle-o check-square check-square-o circle circle-o clock-o cloud cloud-download cloud-upload code code-fork coffee cog cogs comment comment-o comments comments-o compass credit-card crop crosshairs cutlery dashboard (alias) desktop dot-circle-o download edit (alias) ellipsis-h ellipsis-v envelope envelope-o eraser exchange exclamation exclamation-circle exclamation-triangle external-link external-link-square eye eye-slash female fighter-jet film |
filter |
quote-right random refresh reply reply-all retweet road rocket rss rss-square search search-minus search-plus share share-square share-square-o shield shopping-cart sign-in sign-out signal sitemap smile-o sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-down (alias) sort-numeric-asc sort-numeric-desc sort-up (alias) spinner square square-o star star-half star-half-empty (alias) star-half-full (alias) star-half-o star-o subscript suitcase sun-o superscript tablet tachometer tag tags tasks terminal thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o tint toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) trash-o trophy truck umbrella unlock unlock-alt unsorted (alias) upload user users video-camera |
volume-down volume-off volume-up warning (alias) wheelchair wrench check-square check-square-o circle circle-o dot-circle-o minus-square minus-square-o plus-square plus-square-o square square-o bitcoin (alias) btc cny (alias) dollar (alias) eur euro (alias) gbp inr jpy krw money rmb (alias) rouble (alias) rub ruble (alias) rupee (alias) try turkish-lira (alias) usd won (alias) yen (alias) angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up |
chevron-down chevron-left chevron-right chevron-up hand-o-down hand-o-left hand-o-right hand-o-up long-arrow-down long-arrow-left long-arrow-right long-arrow-up toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) arrows-alt backward compress eject expand fast-backward fast-forward forward pause play play-circle play-circle-o step-backward step-forward stop youtube-play adn android apple bitbucket bitbucket-square bitcoin (alias) btc css3 dribbble dropbox facebook-square flickr foursquare github github-alt github-square gittip google-plus google-plus-square html5 linkedin-square linux maxcdn pagelines pinterest-square renren skype stack-exchange stack-overflow trello tumblr tumblr-square twitter-square vimeo-square vk windows xing-square youtube youtube-play youtube-square |
Conteúdo relacionado
-
Usar fontes personalizadas em post do blog ou páginas
Como uma alternativa ao uso de fontes da Web padrão ou uma biblioteca de fontes, como fontes do Google, você...
Central de conhecimento -
Adicione o código do Gerenciador de Tags do Google às suas páginas
O Gerenciador de Tags do Google fornece um snippet de código que pode ser adicionado às suas páginas nas...
Central de conhecimento -
Personalizar o conteúdo
Com tokens de personalização, você pode mostrar conteúdo personalizado para os contatos no seu banco de dados...
Central de conhecimento