COS-General

Gewusst wie: Installieren von Font Awesome

Zuletzt aktualisiert am: April 29, 2016

Font Awesome ist eine Schriftart aus skalierbaren Vektorsymbolen, die nach Größe, Farbe und so ziemlich jedem beliebigen über CSS änderbaren Attribut angepasst werden kann. Gehen Sie folgendermaßen vor, um Font Awesome auf dem COS zu installieren:

  • Kopieren Sie den gesamten Code aus dieser auf HubSpot gehosteten Font Awesome-Datei. Achten Sie darauf, den gesamten Code zu markieren.
  • Fügen Sie den Code in Ihre CSS-Datei ein: Navigieren Sie zu Inhalte > Design-Manager, suchen Sie Ihr Stylesheet und öffnen Sie es, fügen Sie den in Schritt 1 kopierten Code in Ihr Stylesheet ein, und speichern Sie das Stylesheet.
  • Veröffentlichen Sie die CSS-Datei.

Jetzt können Sie Font Awesome nutzen! Font Awesome wird auf Elemente mit class="fa" und einer spezifischen Klasse für das Symbol angewendet, das Sie anzeigen möchten (Beispiel: class="fa-facebook"). Bitte beachten Sie, dass Font Awesome-Symbole in E-Mails nicht funktionieren.

Außerdem sollten Sie daran denken, dass <i class=...>-Elemente nicht mit dem Quelltext unserer WYSIWYG-Editoren verwendet werden können. Beim Versuch, Font Awesome-Symbole zu implementieren, verwenden Sie am besten <span>-Tags wie in dem nachfolgenden Beispiel:

<h2>Beispiel für Font Awesome-Symbole</h2>
<ul class="fa-ul">
<li><span class="fa-twitter fa"></span>Twitter-Symbol</li>
<li><span class="fa-list-ul fa"></span>Liste-Symbol</li>
<li><span class="fa fa-camera-retro fa-lg fa"></span>Kamera-Symbol</li>
</ul>

Wenn Sie das Standard-Hubtheme von HubSpot verwenden, ist Font Awesome bereits in hubtheme-foundation.css enthalten, und Sie können die in diesem Artikel beschriebenen Kurzschreibweisen (Shortcodes) verwenden, um Schriftartsymbole wiederzugeben. Bitte beachten Sie, dass die Kurzschreibweisen nur in Hubtheme verfügbar sind (für sie ist eine spezielle JavaScript-Datei erforderlich).

Alternative zu den Schritten 1 bis 3

Statt den Font Awesome-Code in Ihre vorhandene CSS-Datei zu kopieren, könnten Sie das folgende Link-Tag zum Kopfbereichs-Tag in Ihren Inhaltseinstellungen oder im HTML-Abschnitt für Kopfbereichs-Tags der Vorlage einfügen:

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

Bitte beachten Sie, dass die auf HubSpot gehostete Version von Awesome Font nicht auf dem neuesten Stand ist. Wenn Sie neuere Symbole als die hier aufgelisteten 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.

Artikel zu verwandten Themen: