Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Design Manager

Usar a Font Awesome no HubSpot

Ultima atualização: Outubro 19, 2020

Disponível para

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic (versão anterior)

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.

    custom-module-icon-field
  • 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.

    custom-module-icon-field-insert
  • 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.

    custom-icon-module-page-editor

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.

Agora que o kit está instalado, você pode adicionar os ícones de Font Awesome às suas páginas da HubSpot.

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
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
group (alias)
hdd-o
headphones
heart
heart-o
home
inbox
info
info-circle
key
keyboard-o
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
lightbulb-o
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
music
pencil
pencil-square
pencil-square-o
phone
phone-square
picture-o
plane
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left

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
facebook-square
flickr
foursquare
github
github-alt
github-square
gittip
google-plus
google-plus-square
html5
instagram
linkedin
linkedin-square
linux
maxcdn
pagelines
pinterest
pinterest-square
renren
skype
stack-exchange
stack-overflow
trello
tumblr
tumblr-square
twitter
twitter-square
vimeo-square
vk
weibo
windows
xing
xing-square
youtube
youtube-play
youtube-square