Wie kann man Icons mit CSS erstellen und verwenden: Ein ultimativer Leitfaden

Inhaltsübersicht:

  1. Hinweise zur Verwendung von Icons
  2. Wie kann man Font Awesome Icons verwenden
  3. Wie kann man Font Awesome Icons ausmessen und einfärben
  4. Wie kann man Icons mit Buttons verwenden
  5. Wie kann man Schatteneffekte zu Icons hinzufügen
  6. Wie kann man Font Awesome Icons in einer Liste verwenden
  7. Wie kann man Font Awesome Icons animieren
  8. Wie kann man Font Awesome Icons drehen

Hinweise zur Verwendung von Icons

Um Icons für Ihre Webseite zu verwenden, müssen Sie diese Schritte ausführen:

1) Set-up auf Ihrer Website

Kopieren Sie den Code der Font Awesome Webseite in <head> jeder Vorlage oder Seite, auf der Sie die Font Awesome Icons verwenden möchten.

Für die Verwendung von Font Awesome Icons besuchen Sie diese Seite.

Hier werden wir die Version 5.8.1 link rel verwenden, um die Beziehung zwischen dem aktuellen Dokument und der verlinkten Datei zu definieren:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Es ist kein Herunterladen oder Installieren erforderlich.

2) Hinzufügen von Icons zu Ihrer Benutzeroberfläche (UI)

Die Icons müssen im Element <body> platziert werden. Finden Sie Ihr bevorzugtes Icon und kopieren Sie den HTML-Code davon.

Der Code des Icons wird so aussehen:

<i class="fas fa-camera"></i>

3) Stylen Sie Ihre Icons

Man kann leicht die Größe und Farbe eines Icons ändern, sogar Schatten hinzufügen, indem man nur CSS verwendet. Es ist auch möglich, bewegliche und animierbare Icons zu verwenden.

Wie kann man Font Awesome Icons verwenden

Die Icons können fast überall platziert werden, mit einem Style-Präfix (fa) und dem Namen des Icons. Font Awesome wird mit Inline-Elementen verwendet und es wird empfohlen, dass Sie sich in einem Projekt mit einem konsistenten HTML-Element an sie halten.

Es ist akzeptabel, die Tags <i> und <span> zu verwenden, um Icons auf den Webseiten hinzuzufügen. Wenn es Ihnen nicht gefällt, dass die Seite Ihnen den Code mit dem Tag <i> zur Verfügung stellt, können Sie es zu <span> ändern.

Um auf ein Icons zu verweisen, müssen Sie seinen Namen, der mit fa- und dem entsprechenden Präfix für Ihren bevorzugten Stil (fas, fal, far oder fab) vorangestellt ist, verwenden.

Die Verwendung des Elements <i> zur Referenz des Icons sieht so aus:

<i class="fas fa-camera"></i>

Oder verwenden Sie das Element span, um auf das Icons zu verweisen, wie beispielsweise den untenstehenden Code:

<span class="fas fa-camera"></span>
Das Präfix fa wurde in Version 5 veraltet. Das neue Standardpräfix ist fas für Solid Style, fab Style für Marken, far für Regular Style und fal für Light Style.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <h2>Icons Beispiel</h2>
    <p>Kamera</p>
    <i class="fas fa-camera"></i>
    <p>Wagen</p>
    <i class="fas fa-car"></i> 
    <p>Briefumschlag</p>
    <i class="fas fa-envelope"></i>
  </body>
</html>

Wie kann man Font Awesome Icons ausmessen und sie einfärben

Icons erben die Schriftgröße ihres übergeordneten Containers, um jeden Text abzugleichen, den Sie mit ihnen verwenden können. Sie können die Größe von Icons im Verhältnis zur vererbten Schriftgröße mit Klassen wie fa-xs, fa-sm, fa-lg, fa-2x usw erhöhen oder verringern.

Was die Farbe betrifft, so kann sie durch die CSS-Eigenschaft color eingestellt werden. Sie müssen nur die Icons im Element <div> platzieren und die Farbe dafür in Ihrem Style definieren oder Ihrem Element <i> einfach einen Style geben.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      div {
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für Icons mit vorgegebener Größe und Farbe</h2>
    <div>
      <i class="fas fa-camera fa-xs"></i>
      <i class="fas fa-camera fa-sm"></i>
      <i class="fas fa-camera fa-lg"></i>
      <i class="fas fa-camera fa-2x"></i>
      <i class="fas fa-camera fa-3x"></i>
      <i class="fas fa-camera fa-5x"></i>
      <i class="fas fa-camera fa-7x"></i>
      <i class="fas fa-camera fa-10x"></i>
    </div>
  </body>
</html>

Hier finden Sie die Details der Größenskala:

Klasse Größe
fa-xs .75em
fa-sm .875em
fa-lg 1.33em
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em

Es ist auch möglich, die Größe eines Icons direkt zu gestalten, indem Sie font-size im externen Stil des Symbols oder direkt im Attribut style des HTML-Elements, das auf das Symbol verweist, festlegen.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      i {
      color: #8ebf42;
      }
      .star {
      font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h2>Icons-Beispiel mit font-size und color</h2>
    <div>
      <p>Icon mit voreingestellter Größe.</p>
      <i class="fas fa-star"></i>
      <p>Font-size: 2em;</p>
      <i class="fas fa-star star"></i>
    </div>
  </body>
</html>

Wie kann man Icons mit Buttons verwenden

Sie können diese Icons auch beim Erstellen von Buttons hinzufügen. Fügen Sie einfach das Icon ins Element <button> ein.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Buttons mit Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      button {
      border: none;
      border-radius: 5px;
      color: #ffffff;
      padding: 10px 14px;
      font-size: 16px;
      cursor: pointer;
      }
      button:hover {
      background-color: #666666;
      box-shadow: 2px 4px #999999;
      }
      .btn {
      background-color: #999999;
      }
      .home {
      background-color: #ff6347;
      }
      .menu {
      background-color: #008080;
      }
      .about {
      background-color: #e6b800;
      }
    </style>
  </head>
  <body>
    <h2>Buttons mit Icons</h2>
    <p>Icon Buttons:</p>
    <button class="btn">
    <i class="fa fa-home"></i>
    </button>
    <button class="btn">
    <i class="fa fa-bars"></i>
    </button>
    <button class="btn">
    <i class="fas fa-info-circle"></i>
    </button>
    <p>Icon Buttons mit Text und verschiedenen Farben:</p>
    <button class="home">
    <i class="fa fa-home"></i> Home
    </button>
    <button class="menu">
    <i class="fa fa-bars"></i> Menu
    </button>
    <button class="about">
    <i class="fas fa-info-circle"></i> About
    </button>
  </body>
</html>

Wie kann man Schatteneffekte zu Icons hinzufügen

Für die Schatteneffekte auf Icons ist nur die CSS-Eigenschaft text-shadow notwendig.

Definieren Sie den Schatten für das Element, auf das sich das Symbol bezieht, wie folgt:

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Icons mit Textschatten</h2>
    <div> 
      <i class="fas fa-apple-alt"></i>
      <i class="fas fa-car"></i>
      <i class="fas fa-star-half-alt"></i>
      <i class="far fa-smile"></i>
      <i class="fas fa-paw"></i>
      <i class="fas fa-globe-asia"></i>
    </div>
  </body>
</html>

Wie kann man Font Awesome Icons in einer Liste verwenden

Mit Icons ist es möglich, tolle Dinge zu tun! Wenn Sie möchten, können Sie Ihre HTML-Listen mit Icons als dekorative Aufzählungszeichen gestalten.

Verwenden Sie zu diesem Zweck die Klasse fa-ul für das Element <ul> und die Klasse fa-li für das Element <li>, um die standardmäßigen Aufzählungen in ungeordneten Listen zu ersetzen.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      span {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Icons in einer Liste</h2>
    <ul class="fa-ul">
      <li>
        <span class="fa-li">
        <i class="fas fa-check-double"></i>
        </span>Listeneintrag 1
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-check-circle"></i>
        </span>Listeneintrag 2
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-check-square"></i>
        </span>Listeneintrag 3
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-tasks"></i>
        </span>Listeneintrag 4
      </li>
    </ul>
  </body>
</html>

Wie kann man Font Awesome Icons animieren

Lassen Sie die Icons drehen und pulsieren, indem Sie die Klasse fa-spin verwenden, um ein Icon zum Drehen zu bringen, und die Klasse fa-pulse, um es in 8 Schritten drehen zu lassen. Es funktioniert besonders gut mit fa-spinner.

Es muss so aussehen:

<i class="fas fa-spinner fa-spin"></i>

Sehen Sie dieses Beispiel, um den Unterschied zwischen der Klassen fa-spinund fa-pulse zu sehen:

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Icons mit den Klassen fa-spin und fa-pulse</h2>
    <p>Spinner spin:</p>
    <i class="fas fa-spinner fa-spin"></i>
    <p>Spinner pulse:</p>
    <i class="fas fa-spinner fa-pulse"></i>
  </body>
</html>

Sehen Sie ein weiteres Beispiel mit vielen animierten Icons.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Icons mit Animation</h2>
    <i class="fas fa-spinner fa-pulse"></i>
    <i class="fas fa-star fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-haykal fa-spin"></i>
    <i class="fas fa-stroopwafel fa-pulse"></i>
    <i class="fas fa-car fa-spin"></i>
  </body>
</html>

Wie kann man Font Awesome Icons drehen

Manchmal ist es nötigt, ein Icon für ein großartiges Design zu drehen oder zu spiegeln, deshalb gibt es einige schnelle Hilfsprogramme, um dabei zu helfen.

Um Icons beliebig zu drehen und zu spiegeln, verwenden Sie die Klassen fa-rotate-* undfa-flip-*, wenn Sie ein Icon referenzieren.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Icons mit Drehen</h2>
    <i class="fas fa-star-half-alt"></i>
    <i class="fas fa-star-half-alt fa-rotate-90"></i>
    <i class="fas fa-star-half-alt fa-rotate-180"></i>
    <i class="fas fa-star-half-alt fa-rotate-270"></i>
    <i class="fas fa-star-half-alt fa-flip-horizontal"></i>
    <i class="fas fa-star-half-alt fa-flip-vertical"></i>
    <i class="fas fa-star-half-alt fa-flip-both"></i>
  </body>
</html>

Hier finden Sie die Details zum Drehwert:

Klasse Drehwert
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°
fa-flip-horizontal Es spiegelt das Symbol horizontal.
fa-flip-vertical Es spiegelt das Symbol vertikal.
fa-flip-both Es spiegelt das Symbol horizontal und vertikal (braucht 5.7.0 oder neuere Versionen).