Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
Design Manager

Font Awesome in HubSpot installieren

Zuletzt aktualisiert am: November 22, 2019

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

Font Awesome ist eine Schriftart aus skalierbaren Vektorgrafiken, die sich im Hinblick auf Größe, Farbe und so ziemlich jedes beliebige Attribut, das mit CSS editiert werden kann, anpassen lässt. Es gibt zwei Möglichkeiten, Font Awesome in HubSpot zu verwenden:

Symbolfeld in benutzerdefinierten Modulen verwenden

Sie können aus vorinstallierten Font Awesome-Symbole auswählen, indem Sie in Ihren benutzerdefinierten Modulen ein Symbol hinzufügen. So fügen Sie ein Symbolfeld für ein benutzerdefiniertes Modul hinzu:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Wählen Sie im Finder in der linken Seitenleiste ein vorhandenes benutzerdefiniertes Modul aus. Oder erstellen Sie ein neues benutzerdefiniertes Modul.
  • Fügen Sie dem Modul ein Symbolfeld hinzu, indem Sie rechts auf „Feld hinzufügen“ klicken und dann „Symbol“ auswählen.

    custom-module-icon-field
  • Sie können das Feld weiter anpassen, indem Sie Standardwerte und Editor-Optionen festlegen. Erfahren Sie mehr über die Anpassung von Modulfeldern.
  • Fügen Sie das Symbolfeld zum Modultext hinzu, indem Sie in der rechten Seitenleiste mit dem Mauszeiger auf das Feld zeigen und dann auf „Aktionen“ klicken. Wählen Sie „Snippet kopieren“ aus und fügen Sie den Textausschnitt (das Snippet) dann unter „HTML + HUBL“ dort ein, wo das Symbol angezeigt werden soll.

    custom-module-icon-field-insert
  • Klicken Sie oben rechts auf „Veröffentlichen“.
  • Es handelt sich um ein neues Modul? Fügen Sie das Modul zu allen Vorlagen hinzu, in denen Sie die Symbole verwenden möchten. Klicken Sie oben rechts auf „Veröffentlichen“, um die Änderungen der Vorlage zu veröffentlichen.
  • In Ihrem benutzerdefinierten Modul können Sie jetzt Font Awesome-Symbole auswählen, entweder über den Design-Manager oder den Seiten-Editor.

    custom-icon-module-page-editor

Manuelle Installation von Font Awesome

Installieren Sie Font Awesome in HubSpot nur manuell, wenn Sie mit der Bearbeitung von Stylesheets auf Ihrer Website vertraut sein. So installieren Sie Font Awesome manuell in HubSpot: Laden Sie Font Awesome zunächst in Ihren Datei-Manager hoch und aktualisieren Sie dann die HTML-Elemente, um Font Awesome-Klassen verwenden zu können.

 Font Awesome in Ihren Datei-Manager hochladen

  • Laden Sie die gewünschte Font Awesome-Version von http://fontawesome.io/ herunter und entpacken Sie die ZIP-Datei auf Ihrem Computer.
  • Öffnen Sie die Datei „the font-awesome.css“ und kopieren Sie den Inhalt.
  • Fügen Sie den Inhalt dieser Datei in ein Stylesheet in HubSpot ein.
  • Öffnen Sie in Ihrem Browser eine neue Registerkarte, um auf Ihren Datei-Manager zuzugreifen. Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Datei-Manager. Laden Sie hier nun sämtliche Font Awesome-Schriftdateien hoch, die in der Font Awesome-CSS-Datei unter „Font Path“ referenziert sind.
  • Nachdem Sie diese Dateien in den Datei-Manager geladen haben, kopieren Sie die URLs aller Dateien und ersetzen Sie alle relativen Links in Ihrer CSS-Datei mit der URL der entsprechenden Datei im Datei-Manager. Ihr Code wird dann wie folgt aussehen. Es werden jedoch die URLs angezeigt, die Sie aus Ihrem eigenen Datei-Manager kopiert haben:

/* FONT PATH
* -------------------------- */
@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;
}

  • Klicken Sie in Ihrem Stylesheet auf „Änderungen veröffentlichen“, wenn alle relativen URLs ersetzt sind.

Font Awesome verwenden

Sobald Sie entweder die auf HubSpot gehostete Version von Font Awesome referenziert haben oder Ihre eigenen Dateien auf dem Portal hochgeladen haben, steht Ihnen die Schrift zur Verwendung in Ihrem Content zur Verfügung. Font Awesome wird auf Elemente mit class="fa" und einer spezifischen Klasse für das Symbol angewendet, das Sie anzeigen lassen möchten (Beispiel: class="fa-facebook").

Beispiel:

class="fa fa-facebook"

Beachten Sie bitte, dass Font Awesome-Symbole nicht in E-Mails eingefügt werden können. Außerdem können -Elemente nicht im Quellcode der HubSpot-WYSIWYG-Editoren verwendet werden. Wenn Sie Font Awesome-Symbole verwenden möchten, nutzen Sie am besten -Tags, wie in diesem Beispiel:

Font Awesome Icons Beispiel

 

    • Twitter Icon

    • Listen-Icon

    • Kamerasymbol

Von HubSpot gehostete Font Awesome-Symbole

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

Bitte beachten: Die auf HubSpot gehostete Version von Font Awesome ist unter Umständen nicht auf dem neuesten Stand. Wenn Sie neuere Symbole verwenden möchten, müssen Sie Ihre eigenen Schriftartdateien in den Datei-Manager hochladen und die @font-face-Referenz durch die entsprechenden src-URLs ersetzen.

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