Font Awesome in HubSpot installieren

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.
  
  
• 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.
  
  

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

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.