Font Awesome-Symbole

Bei Font Awesome handelt es sich um eine Sammlung von skalierbaren Vektorsymbolen, die sofort individuell angepasst werden können – dank CSS können Größe, Farbe und Schatten geändert und andere Änderungen vorgenommen werden.

1500+ icons for you

Sie können beliebige der über 650 Symbole kostenlos in jedem Bereich Ihres Help Centers (Layout, Artikel usw.) verwenden. Sie sind bereits in allen unseren Themes enthalten. Auf dieser Seite finden Sie alle Font Awesome-Symbole und den entsprechenden Code.

Font Awesome im Text

Es ist relativ einfach, ein Font Awesome-Symbol in einen beliebigen Text in Ihrem Help Center einzufügen  . Font Awesome ist auch bei kommerzieller Nutzung völlig kostenlos  . Die Symbole liegen im Vektorgrafikformat vor, was bedeutet, dass sie auf hochauflösenden Displays einfach atemberaubend dargestellt werden  . Es ist sehr einfach, Ihr eigenes Design durch Ändern der Farbe der Symbole, der Größe, der Schatten und aller anderen, mit CSS möglichen Aspekte zu entwerfen  .


<p>Es ist relativ einfach, ein Font Awesome-Symbol in einen beliebigen Text in Ihrem Help Center einzufügen <em class="fas fa-flag">&nbsp;</em>. Font Awesome ist auch bei kommerzieller Nutzung völlig kostenlos <em class="fas fa-hand-left">&nbsp;</em>. Die Symbole liegen im Vektorgrafikformat vor, was bedeutet, dass sie auf hochauflösenden Displays einfach atemberaubend dargestellt werden <em class="fas fa-eye">&nbsp;</em>. 
Es ist sehr einfach, Ihr eigenes Design durch Ändern der Farbe der Symbole, der Größe, der Schatten und aller anderen, mit CSS möglichen Aspekte zu entwerfen <em class="fas fa-pencil-alt">&nbsp;</em>.
</p>

Bitte beachten Sie, dass der Editor von Zendesk leere Tags, die zum Quellcode hinzugefügt werden, entfernt. Stellen Sie also sicher, dass Sie ein geschütztes Leerzeichen &nbsp; zum Code hinzufügen. Verwenden Sie beispielsweise nicht Folgendes:

<em class="fas fa-pencil"> </em>

Verwenden Sie stattdessen Folgendes:

<em class="fas fa-pencil">&nbsp;</em>

Font Awesome-Titel

Sie können beliebige Symbole aus der Font Awesome-Bibliothek verwenden, um Ihre Titel stilvoller und einprägsamer zu gestalten!

  Titel mit Motorrad

  Titel mit Taschenrechner

  Titel mit Fernglas

  Titel mit schlagendem Herz

<h4><em class="fas fa-2x fa-motorcycle">&nbsp;</em> Titel mit Motorrad</h4>
<h4 class="wysiwyg-color-green120"><em class="fas fa-2x fa-calculator">&nbsp;</em> Titel mit Taschenrechner</h4>
<h4 class="wysiwyg-color-pink"><em class="fas fa-2x fa-binoculars">&nbsp;</em> Titel mit Fernglas</h4>
<h4 class="wysiwyg-color-red"><em class="fas fa-2x fa-heartbeat">&nbsp;</em> Titel mit schlagendem Herz</h4>

Und nicht nur Ihre Titel:

 

Morgen laufen wir schneller, strecken die Arme weiter aus ... Und eines schönen Tages ... So kämpfen wir weiter, wie Boote gegen den Strom, und unablässig treibt es uns zurück in die Vergangenheit.

<div class="fas fa-quote-left fa-3x fa-pull-left fa-border">&nbsp;</div>
<p>Morgen laufen wir schneller, strecken die Arme weiter aus ... Und eines schönen Tages ... So kämpfen wir weiter, wie Boote gegen den Strom, und unablässig treibt es uns zurück in die Vergangenheit.</p>

Animieren Sie sie!

 
 
 
 
 
 
 
 
 
<div class="fas fa-spinner fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-circle-notch fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-sync fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-cog fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-venus fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-mars fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-firefox fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-opera fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-chrome fa-spin fa-3x fa-fw">&nbsp;</div>

Und kombinieren Sie sie:

 
 

fab-twitter and fa-square

 
 

fa-flag and fa-circle

 
 

fa-terminal and fa-square

<div style="text-align: center;">
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fab fa-twitter fa-stack-1x">&nbsp;</div>
    </div>
    <p>fa-twitter and fa-square</p>
  </div>
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-circle fa-stack-2x">&nbsp;</div>
      <div class="fas fa-flag fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-flag and fa-circle</p>
  </div>
  <div style="display: inline-block;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fas fa-terminal fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-terminal and fa-square</p>
  </div>
</div>

Beiträge in diesem Abschnitt

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich
Teilen

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.