Design Manager

Gebruik lettertype Awesome in HubSpot

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Font Awesome

is een lettertype van schaalbare vectoriconen dat kan worden aangepast op basis van grootte, kleur en zowat elk attribuut dat kan worden gewijzigd met CSS. De twee meest voorkomende methoden voor het gebruik van Font Awesome in HubSpot zijn:
  • Gebruik van het veld met pictogrammen in aangepaste modules
  • Met behulp van een Font Awesome kit

Let op: Font Awesome iconen zullen niet werken in e-mail omdat de meerderheid van de e-mailclients geen webfonts weergeven. Om pictogrammen in een e-mail te gebruiken, moet u in plaats daarvan pictogrammen in afbeeldingen omzetten en vervolgens de afbeeldingen in de e-maileditor invoegen

.

Gebruik het veld met pictogrammen in aangepaste modules

U kunt kiezen uit vooraf geïnstalleerde Font Awesome pictogrammen door een pictogramveld toe te voegen aan uw aangepaste modules. Om een pictogramveld toe te voegen aan een aangepaste module:

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Selecteer uit de finder in de linker zijbalk een bestaande aangepaste module. Of maak een nieuwe aangepaste module aan.
  • Voeg een pictogramveld toe aan de module door te klikken op Toevoegen veld in de rechter zijbalk en vervolgens Icoon te selecteren.

    custom-module-icon-field
  • U kunt het veld verder aanpassen door standaardwaarden en bewerkingsopties in te stellen. Meer informatie over het aanpassen van modulevelden.
  • Voeg het icoonveld toe aan de module door met de muis over het veld in de rechter zijbalk te gaan en vervolgens op Acties te klikken. Selecteer Kopieerknipsel en plak het knipsel in de HTML + HUBL sectie waar u het pictogram wilt laten verschijnen.

    custom-module-icon-field-insert
  • Klik rechtsboven op Publiceren.
  • Als dit een nieuwe module is, voegt u de module toe aan alle sjablonen waar u de pictogrammen wilt gebruiken. Klik rechtsboven op Publiceren om de wijzigingen in het sjabloon te publiceren.
  • U kunt nu Font Awesome pictogrammen in uw aangepaste module selecteren, ofwel in de ontwerpmanager ofwel in de pagina-editor.

    custom-icon-module-page-editor

Gebruik een lettertype-ontweldige kit

U kunt Font Awesome pictogrammen op uw hele site toevoegen door een Font Awesome kit te maken, de code aan uw hoofd HTML toe te voegen en vervolgens de pictogrammen aan uw pagina toe te voegen. Meer informatie over Font Awesome kits

. Nu de kit is geïnstalleerd, kunt u Font Awesome pictogrammen toevoegen aan uw HubSpot pagina's.

Pictogrammen toevoegen aan uw pagina

Om een pictogram toe te voegen aan een pagina, moet u uw content HTML bewerken om Font Awesome klassen toe te wijzen aan uw elementen. In HubSpot kan dit betekenen dat u een aangepaste module of gecodeerd bestandmoetbewerken, een blogsjabloon moet bewerken of de broncode van een rijke tekstmodule in de pagina-editor moet bewerken.

Elk icoon bestaat uit twee delen van de klasseverklaring:

  • De naam van het pictogram, voorafgegaan door fa-. Bijvoorbeeld: fa-camera
  • Het stijlvoorvoegsel. Bijvoorbeeld, fas.

Voor merkpictogrammen, zoals Facebook, moet u het voorvoegsel van de fab-stijl

gebruiken. Bijvoorbeeld:
class="fab fa-facebook"

U kunt een <i>-element of <span>-element gebruiken bij het invoegen van de pictogrammen. In het onderstaande voorbeeld werken beide methoden:

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

Leer meer over de basisprincipes van het gebruik van Font Awesome pictogrammen in uw inhoud

.

HubSpot-host Font Geweldige pictogrammen

stel de pijlen-pijlen-pijlen-vasteriskbankbalken-chart-obarcodebarsbeerbell-oboltbookmark-boekboekje-markering-markering-buggen-bull-bull-bullseyecalendar-kalender-























ocameracamera-retrocaret-kwadraat-o-downcaret-kwadraat-o-linkscaret-kwadraat-o-rechtscaret-kwadraat-o-up-certificatecheck-cirkel-cirkel-check-cirkel-cirkel-lock-














ocloudcloud-downloadloadcode-uploadcode-vorkcoffeecogcogcomment-commentaarcommentaar-ocompasscredit-carcrosscutlerydashboard

















(alias)
desktopdot-cirkel-
odownloadedit

(alias)
ellipsis-hellipsis-venvelopeenveloppe-uitwisseling-exclamatie-cirkeluitdraai-extern-linkextern-link-squareeyeeye-slashfemalefighter-jetfilm





























































filtervuur-brandblusvlaggen-ruiten-vlaggen-





(alias)
flash-mappen-map-open-map-open-kruiden-ogamepadgavelgear







(ali














as














)
tandwielen (alias)
giftglassglob-groep


(alias)
hdd-ohoofdtelefoonshethart-huisjeinfoinfo-cirkeltoetsenbordolaptopleaflegal











(alias)
lemon-olevel-downlevel-uplightbulb-olocation-arrowlockmagicmagnetmagnetic-mail-







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










(alias)
moneymoon-

omusicpencil-squarepencil-square-ophonephone-squarepicture-oplaneplusplus-circleplus-square-opower-offprintpuzzle-pieceqrcodequestion-circlequote-left

























































quote-rightrandomrefreshreply-allretweetroadrocketrssrss-squaresearch-plusshareshare-square-oshieldshopping-cartsign-insign-outsignalsitemapsmile-






















osortsort-alpha-ascsort-alpha-alpha-deskort-deskort-deskort-down






(alias)
sort-numerieke-ascsort-numerieke-deskort-up

(alias)
spinnersquare-ostar-halfstar-halfstar-half-




lege (alias)
ster-halfvolle (alias)
ster-sterren-osubscripttablettachometertagtagstasksterminalthumb-tackthumbs-downthumbs-o-downthumbs-o-upthumbs-uptickettimestimes-


















cirkel-omloop-tot-omlaag


(alias)-


omlaag (alias



)
-omlaag-rechts (




alias




)
-omlaag (alias)-omhoog (alias)
-trash-otrophytruckumbrellaunlock-algeordende





(alias)
uploadusersvideo-camera









































































volume-downvolume-off-volume-upwaarschuwing


(alias)
-rolstoelsleutel-cirkel-cirkel-cirkel-odot-cirkel-ominus-squareminus-kwadraat-plus-kwadraat-vierkant -












obitcoin (alias)
btccny
(alias


)



dollar (alias)
eureuro
(alias)
gbpinrjpykrwmoneyrmb




(ali











as











)
roebel












(alias)













rubruble
(alias)
rupee (















alias)
















tryturkish-lira (ali
















as

















)
usdwon
(



















alias



















)
yen (alias)
angle-double-downangle-double-leftangle-dubbele-rechthoek-upangle-



neer-hoek-links-hoekop-pijl-omlaag-cirkel-links-pijl-omlaag-cirkel-links-pijl-omlaag-cirkel-o-rechts-pijl-omlaag-cirkel-o-rechts-pijl-omhoog-cirkel-links-pijl-rechts-pijl-rechts-pijl-














pijlen-op-pijlen-alt-pijlen-zorgverlagers-linksverzorging-rechtsverzorging-kwadraat-o-linksverzorging-kwadraat-o-rechtsverzorging-kwadraat-o-opverzorging-upchevron-cirkel-linkschevron-cirkel-rechtschevron-cirkel-omhoog
























































chevron-downchevron-linkschevron-rechtschevron-uphand-o-downhand-o-lefthand-o-righthand-o-uplong-arrow-downlong-leftlong-arrow-rightlong-uptoggle-down











(alias)
toggle-down (alias)toggle-left (ali












as)













toggle-



























rechts (alias)
-omhooggaande (alias)
-pijlen-altbackwardcompresseject-expandfast-voorwaartspauzespel-cirkelspel-cirkel-voor-stap-voorwaarts-stopyoutube-playadnandroidapplebitbucket-bitbucket-



















squarebitcoin
(alias)
btccss3dribbbledropboxfacebookfacebook-squareflickrfoursquaregithubgithub-altgithub-squaregittipgoogle-plusgoogle-plus-squarehtml5instagramlinkedin-linkedin-
















squarelinuxmaxcdnpagelinespintintinterest-squarerenrenskypestack-exchangestack-overflowtrellotumblrtumblr-squaretwittertwitter-squarevimeo-squarevkweibowindowsxing-squareyoutubeyoutube-playyoutube-quare