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.
CMS-General

Instale a Font Awesome no HubSpot

Ultima atualização: Novembro 22, 2019

Disponível para

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

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.

    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

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

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

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.

/pt/cos-general/how-to-install-font-awesome