Zuletzt aktualisiert am: Oktober 19, 2020
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. Die beiden häufigsten Methoden der Verwendung von Font Awesome in HubSpot sind:
- Verwendung des Symbolfelds in benutzerdefinierten Modulen
- Font Awesome-Kit verwenden
Bitte beachten: Font Awesome-Symbole funktionieren nicht in E-Mails, da die Mehrzahl der E-Mail-Clients Webfonts nicht darstellt. Um Symbole in einer E-Mail zu verwenden, müssen Sie stattdessen Symbole in Bilder konvertieren, und die Bilder in den E-Mail-Editor einfügen.
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.
- 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.
- 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.
Font Awesome-Kit verwenden
Sie können Font Awesome-Symbole auf Ihrer gesamten Website hinzufügen, indem Sie einen Font Awesome-Kit erstellen, den Code zu Ihrem Kopfzeilen-HTML hinzufügen und dann die Symbole zu Ihrer Seite hinzufügen. Erfahren Sie mehr über Font Awesome-Kits.
- Beginnen Sie, indem Sie einen Kit auf der Website von Font Awesome erstellen. Nachdem Sie einen Kit erstellt haben, erhalten Sie eine Code-Zeile, die Sie HubSpot hinzufügen können. Der Code sieht ungefähr so aus:
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script> - In HubSpot: Fügen den Kit-Code in den Kopfzeilen-HTML Ihrer Website ein. Dadurch wird Font Awesome auf allen Seiten verfügbar, je nachdem, welche Subdomain Sie beim Bearbeiten des Kopfzeilen-HTML Ihrer Website auswählen. Um Font Awesome nur einer Seite hinzuzufügen, können Sie stattdessen den Kit-Code zum Kopfzeilen-HTML einer einzelnen Seite hinzufügen.
Symbole zu Ihrer Seite hinzufügen
Um ein Symbol zu einer Seite hinzuzufügen, müssen Sie Ihren Content-HTML bearbeiten, um Font Awesome-Klassen zu Ihren Elementen zuweisen zu können. In HubSpot-Software kann dies das Bearbeiten eines benutzerdefinierten Moduls oder codierten Datei, das Bearbeiten einer Blog-Vorlage oder das Bearbeiten des Quellcodes eines Rich-Text-Moduls im Seiteneditor bedeuten.
Bei jedem Symbol besteht die Definition der Klasse aus zwei Teilen:
- Der Symbolname, mit dem Präfix fa-. Zum Beispiel: fa-camera
- Das Stilpräfix. Beispielsweise fas.
Für Markensymbole wie Facebook müssen Sie das fab-Stilpräfix verwenden. Zum Beispiel:
class="fab fa-facebook"
Sie können entweder ein <i>-Element oder ein <span>-Element beim Einfügen der Symbole verwenden. Im folgenden Beispiel funktionieren beide Methoden:
<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>Erfahren Sie mehr über die Grundlagen der Verwendung von Font Awesome-Symbolen in Ihrem Content.
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 |
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-square flickr foursquare github github-alt github-square gittip google-plus google-plus-square html5 linkedin-square linux maxcdn pagelines pinterest-square renren skype stack-exchange stack-overflow trello tumblr tumblr-square twitter-square vimeo-square vk windows xing-square youtube youtube-play youtube-square |