Design Manager

Usar Font Awesome en HubSpot

Última actualización: octubre 19, 2020

Requisitos

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Básico (versión anterior)

Font Awesome es una fuente de iconos vectoriales ampliables que se pueden personalizar según el tamaño, el color y cualquier otro atributo que se pueda cambiar con CSS. Los dos métodos más comunes de usar Font Awesome en HubSpot son:

  • Usar el campo del ícono en módulos personalizados
  • Usar un kit de Font Awesome

Nota: Los íconos de Font Awesome no funcionan en el correo electrónico porque la mayoría de los clientes de correo electrónico no representan las fuentes web. Para usar íconos en un correo electrónico, deberás convertir íconos en imágenes y luegoinsertar las imágenes en el editor de correo electrónico. 

Usa el campo del icono en módulos personalizados

Puedes seleccionar de iconos preinstalados de Font Awesome agregando un campo de icono a tus módulos personalizados. Para agregar un campo de icono a un módulo personalizado:

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • Desde el buscador en la barra lateral izquierda, selecciona un módulo personalizado existente. O, crear un nuevo módulo personalizado.
  • Agrega un campo de icono al módulo haciendo clic en Agregar campo en la barra lateral derecha y luego seleccionando Icono.

    custom-module-icon-field
  • Puedes personalizar el campo configurando opciones predeterminadas y opciones de editor. Más información sobre cómo personalizar los campos del módulo.
  • Agrega el campo del icono al cuerpo del módulo colocando el cursor sobre el campo en la barra lateral derecha y luego haz clic en Acciones. Selecciona Copiar fragmento, pega el fragmento en la sección HTML + HUBL donde deseas que aparezca el icono.

    custom-module-icon-field-insert
  • En la parte superior derecha, haz clic en Publicar.
  • Si este es un nuevo módulo, agrega el módulo a cualquier plantilla donde desees usar los íconos. Haz clic en Publicar en la parte superior derecha para publicar los cambios de plantilla.
  • Ahora puedes seleccionar íconos de Font Awesome en tu módulo personalizado, ya sea desde el administrador de diseño o el editor de páginas.

    custom-icon-module-page-editor

Usar un kit de Font Awesome

Puedes agregar íconos de Font Awesome en tu sitio al crear un kit de Font Awesome, agregar el código a tu HTML de encabezado y luego agregar los íconos a tu página. Más información sobre kits de Font Awesome.

Ahora que el kit está instalado, puedes agregar íconos de Font Awesome a tus páginas de HubSpot.

Agrega íconos a tu página

Para agregar un ícono a una página, deberás editar tu HTML de contenido para asignar clases Font Awesome a tus elementos. En HubSpot, esto podría significar la edición de un módulo personalizado o Archivo codificadoedición de una plantilla de blog o la edición del código fuente de un módulo de texto enriquecido en el editor de páginas.

Cada ícono tiene dos partes en la declaración:

  • El nombre del ícono, con el prefijo fa-. Por ejemplo: fa-camera
  • El prefijo de estilo. Por ejemplo, fas

Para los íconos de marca, como Facebook, deberás usar el prefijo de estilo fab. Por ejemplo:

class="fab fa-facebook"

Puedes usar un elemento <i> <span> al insertar los íconos. En el siguiente ejemplo, ambos métodos funcionan:

<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>

Más información sobre cómo usar los íconos de Font Awesome en tu contenido.

Íconos de Font Awesome alojados en 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