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. Um Font Awesome in HubSpot zu installieren, sollten Sie mit dem Bearbeiten von Stylesheets auf Ihrer Website vertraut sein:

• Kopieren Sie den Code aus dieser auf HubSpot gehosteten Font Awesome-Datei (V 4.1.0).
• Öffnen Sie Ihren Design-Manager. Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
• Öffnen Sie das Stylesheet, das auf Ihren Content angewendet wird, und fügen Sie den im vorherigen Schritt kopierten Code ein. Wenn Sie sich nicht sicher sind, welche Stylesheet Sie aktualisieren möchten, erfahren Sie hier, wie Sie das Stylesheet für einen bestimmten Content finden.
• Klicken Sie auf „Änderungen veröffentlichen“, um Ihr Stylesheet zu aktualisieren. Wie Sie Font Awesome in Ihrem Content verwenden können, erfahren Sie hier.

Alternativ zum Kopieren des von HubSpot gehosteten Font Awesome-Codes in Ihre CSS-Datei können Sie den gleichen Code in das Feld „Website-Header-HTML“ in Ihren Einstellungen oder im Abschnitt „HTML-Kopfzeilen-Tag“ einer bestimmten Seite einfügen.

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:

<h2>Font Awesome Icons Example</h2>
<ul class="fa fa-ul">
<li><span class="fa fa-twitter"></span>Twitter Icon</li>
<li><span class="fa fa-list-ul"></span>List Icon</li>
<li><span class="fa fa-camera-retro fa-lg"></span>Camera Icon</li>
</ul>

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.