CMS-General

So funktioniert die Installation von Font Awesome

Zuletzt aktualisiert am: Mai 16, 2018

Produkte/Lizenzen

Marketing Hub Basic, Professional, Enterprise

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. Gehen Sie folgendermaßen vor, um Font Awesome auf dem HubSpot CMS zu installieren.

Wenn Sie die auf HubSpot gehostete Version von Font Awesome verwenden möchten, gehen Sie wie folgt vor:

Bitte beachten Sie, dass die auf HubSpot gehostete Version von Font Awesome unter Umständen nicht auf dem neuesten Stand ist. Wenn Sie neue Symbole verwenden möchten, die in dieser Liste fehlen, folgen Sie bitte diesen Schritten.

Wenn Sie das Standard-HubTheme von HubSpot verwenden, ist Font Awesome bereits in hubtheme-foundation.css enthalten und Ihnen stehen die in diesem Artikel beschriebenen Shortcodes zur Verfügung. Bitte beachten Sie, dass die Shortcodes nur in HubTheme verfügbar sind. (Sie erfordern eine bestimmte JavaScript-Datei).

  • Kopieren Sie den Code aus dieser auf HubSpot gehosteten Font Awesome-Datei (V 4.1.0). Achten Sie dabei darauf, den gesamten Code zu markieren.
  • Fügen Sie den Code in Ihre CSS-Datei ein.
    • Gehen Sie in HubSpot zu „Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“, öffnen Sie das Stylesheet, fügen Sie den soeben kopierten Code in die Datei ein und speichern Sie sie.
  • Veröffentlichen Sie die CSS-Datei. Wie Sie Font Awesome in Ihrem Content verwenden können, erfahren Sie hier.

Anstatt den auf HubSpot gehosteten Font Awesome-Code in Ihre CSS-Definitionen zu kopieren, können Sie ihn alternativ auch zum Head-Tag Ihrer Seiten hinzufügen oder in das Head-Tag-HTML-Feld Ihrer Vorlage einfügen, um die auf HubSpot gehostete Font Awesome-Datei einzubinden:

< link href="http://designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css" rel="stylesheet">

Beachten Sie bitte, dass dieser Link für Font Awesome Version 4.1.0 gilt.

 

So laden Sie eine Font Awesome-Datei in Ihrem Portal hoch:

  • 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 font-awesome.css, kopieren Sie ihren Inhalt und fügen Sie diesen in HubSpot in ein Stylesheet ein.
  • Öffnen Sie den Datei-Manager von HubSpot in einer neuen Registerkarte. Sie finden ihn unter „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 JEDEN relativen Link in Ihrer CSS-Datei mit der URL der entsprechenden Datei im Datei-Manager. Ihr Code wird dann wie folgt aussehen. Hier fehlen allerdings noch die URLs der Datei-Manager-Dateien:

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

  • Nachdem Sie alle relativen URLs ersetzt haben, speichern Sie die CSS-Datei. Nun können Sie Font Awesome verwenden.

 

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").

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

< h2>Font Awesome – Beispiele< /h2>
< ul class="fa-ul">
< li>< span class="fa-twitter fa">< /span>Twitter-Symbol< /li>
< li>< span class="fa-list-ul fa">< /span>Listen-Symbol< /li>
< li>< span class="fa fa-camera-retro fa-lg fa">< /span>Kamera-Symbol< /li>
< /ul>