Nota bene: la traduzione in olandese di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.
Design Manager

Utilizzare Font Awesome in HubSpot

Ultimo aggiornamento: gennaio 27, 2021

Si applica a:

Marketing Hub  Professional, Enterprisee
CMS Hub  Professional, Enterprisee
Legacy Marketing Hub Basic

Font Awesome

è un font di icone vettoriali scalabili che possono essere personalizzate per dimensione, colore e praticamente qualsiasi attributo che può essere cambiato con i CSS. I due metodi più comuni per utilizzare Font Awesome in HubSpot sono:
  • Usare il campo icona nei moduli personalizzati
  • Usare un kit Font Awesome

Nota: le icone di Font Awesome non funzionano nelle e-mail perché la maggior parte dei client di posta elettronica non rende i webfonts. Per usare le icone in una email, dovrai invece convertire le icone in immagini, quindi inserire le immagini nell'editor di email

.

Utilizzare il campo icona nei moduli personalizzati

Puoi scegliere tra le icone Font Awesome preinstallate aggiungendo un campo icona ai tuoi moduli personalizzati. Per aggiungere un campo icona ad un modulo personalizzato:

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Dal cercatore nella barra laterale sinistra, seleziona un modulo personalizzato esistente. Oppure crea un nuovo modulo personalizzato.
  • Aggiungi un campo icona al modulo cliccando su Add field nella barra laterale destra, quindi selezionando Icon.

    custom-module-icon-field
  • Puoi personalizzare ulteriormente il campo impostando i valori predefiniti e le opzioni dell'editor. Per saperne di più sulla personalizzazione dei campi del modulo.
  • Aggiungi il campo icona al corpo del modulo passando il mouse sul campo nella barra laterale destra e cliccando su Actions. Seleziona Copiasnippet, poi incolla lo snippet nella sezione HTML + HUBL dove vuoi che appaia l'icona.

    custom-module-icon-field-insert
  • In alto a destra, clicca su Pubblica.
  • Se questo è un nuovo modulo, aggiungi il modulo a tutti i modelli in cui vuoi usare le icone. Fai clic suPubblica in alto a destra per pubblicare le modifiche al modello.
  • Ora puoi selezionare le icone Font Awesome nel tuo modulo personalizzato, sia dal design manager che dall'editor di pagina.

    custom-icon-module-page-editor

Utilizzare un kit Font Awesome

Puoi aggiungere le icone Font Awesome in tutto il tuo sito creando un kit Font Awesome, aggiungendo il codice al tuo HTML principale e poi aggiungendo le icone alla tua pagina. Per saperne di più sui kit di Font Awesome

. Ora che il kit è installato, puoi aggiungere le icone Font Awesome alle tue pagine HubSpot.

Aggiungi icone alla tua pagina

Per aggiungere un'icona a una pagina, dovrai modificare il tuo contenuto HTML per assegnare le classi di Font Awesome ai tuoi elementi. In HubSpot, questo potrebbe significare modificare un modulo personalizzato o un file codificato, modificare un modello di blog, o modificare il codice sorgente di un modulo rich text nell'editor di pagina

.

Ogni icona ha due parti nella dichiarazione di classe:

  • Il nome dell'icona, preceduto da fa-. Per esempio: fa-camera
  • Il prefisso dello stile. Per esempio, fas.

Per le icone del marchio, come Facebook, è necessario utilizzare il prefisso fab

style. Per esempio:
class="fab fa-facebook"

Puoi usare un elemento <i> o un elemento <span> quando inserisci le icone. Nell'esempio qui sotto, entrambi i metodi funzionano:

< i class="fasfa-camera"></i>
< span class="fasfa-camera"></span>

Scopri di più sulle basi dell'utilizzo delle icone Font Awesome nel tuo contenuto

.

icone Font Awesome ospitate da HubSpot

adjustanchorarchivearrows-harrows-vasteriskbanbar-chart-obarcodebarsbeerbellbell-oboltbookbookbookmark-obriefcasebugbuilding-obullhornbullseyecalendarcalendar-























ocameracamera-retrocaret-square-o-downcaret-square-o-leftcaret-square-o-rightcaret-square-o-upcertificatecheckcheck-circle-circle-ocheck-square check-square-occlare-circle-oclock-














ocloudcloud-downloadcloud-uploadcodecode-forkcoffeecogcogscomment-ocommentscomments-ocompasscredit-cardcropcrosshairscutlerydashboard

















(alias)
desktopdot-circle-

oownloadedit
(alias)ellipsis-hellipsis-venvelopeenvelope-oeraserexchangeexclamationexclamation-circleexclamation-triangleexternal-linkexternal-link-squareeyeeye-slashfemalefighter-jetfilm




























































filterfirefire-extinguisherflagflag-checkeredflag-oflash





(alias)
flaskfolderfolder-ofolder-openfolder-open-ofrown-ogamepadgavelgear







(alias)
gears (alias)
giftglassglobegroup


(alias)
hdd-oheadphonesheart-ohomeinboxinfoinfo-circlekeykeyboard-olaptopleaflegal











(alias)
lemon-olevel-downlevel-uplightbulb-olocation-arrowlockmagicmagnetmail-







forward (alias)
mail-reply (alias)
mail-reply-allmalemap-markermeh-omicrophonemicrophone-slashminus-circleminus-squareminus-square-omobilemobile-phone










(alias)
moneymoon-

omusicpencilpencil-squarepencil-square-ophone-squarepicture-oplaneplusplus-circleplus-squareplus-square-opower-offprintpuzzle-pieceqrcodequestion-circlequote-left

























































quote-destrarandomrefreshreplyreply-allretweetroadrocketrssrss-squaresearch-minussearch-plusshareshare-squareshare-square-oshieldshopping-cartsign-insign-outsignalsitemapsmile-






















osortsort-alpha-ascsort-alpha-descsort-amount-ascsort-amount-descsort-ascsort-descsort-down






(alias)
sort-numeric-ascsort-numeric-descsort-up

(alias)
spinnersquaresquare-ostarstar-halfstar-half-




empty (alias)
star-half-full (alias)
star-half-ostar-osubscriptsuitcasesun-osuperscripttablettachometertagstasksterminalthumb-tackthumbs-downthumbs-o-downthumbs-o-upthumbs-uptickettitimes-


















circletimes-circle-otinttoggle-down


(alias)
toggle-left (alias)
toggle-right (ali




as




)
toggle-up (alias)
trash-otrophytruckumbrellaunlockunlock-altunsorted





(alias)
uploaduserusersvideo-camera









































































volume-downvolume-offvolume-upwarning


(alias


)



wheelchairwrenchcheck-squarecheck-square-ocircle-odot-circle-ominus-squareminus-square-oplus-squareplus-square-osquaresquare-












obitcoin (alias)
btccny
(alias)
dollaro (alias)
eureuro
(alias)
gbpinrjpykrwmoneyrmb




(alias)

rublo
(ali














as












)
rubruble
(alias)
rupia (alias)
tryturkish-lira
(alias)
usdwon
(alias)
yen (alias)
angle-double-downangle-double-leftangle-double-rightangle-double-upangle-


















uparrows-altarrows-harrows-vcaret-downcaret-leftcaret-rightcaret-square-o-downcaret-square-o-leftcaret-square-o-rightcaret-square-o-upcaret-upchevron-circle-downchevron-circle-leftchevron-circle-rightchevron-circle-up
























































chevron-downchevron-leftchevron-rightchevron-uphand-o-downhand-o-lefthand-o-righthand-o-uplong-arrow-downlong-arrow-leftlong-arrow-rightlong-arrow-uptoggle-down











(alias)
toggle-left (alias)
toggle-destra (alias)
toggle-up (alias)
frecce-altbackwardcompressejectexpandfast-backwardfast-forwardpauseplayplay-circleplay-circle-ostep-backwardstep-forwardstopyoutube-playadnandropplebitbucketbucket-



















squarebitcoin
(alias)
btccss3dribbbledropboxfacebookfacebook-squareflickrfoursquaregithubgithub-altgithub-squaregittipgoogle-plusgoogle-plus-squarehtml5instagramlinkedinlinkedin-
















squarelinuxmaxcdnpagelinespinterestpinterest-squarerenrenskypestack-exchangestack-overflowtrellotumblrtumblr-squaretwittertwitter-squarevimeo-squarevkweibowindowsxingxing-squareyoutubeyoutube-playyoutube-square