Symbole mit FontAwesome

Hier werden diverse FontAwesome Icons in unterschiedlichen Ausführungen verwendet.
Entweder die Standard-Anwendung über Zuweisung mehrerer, vorgefertigter CSS-Klassen
oder am Beispiel der horizontalen Linien über selstgeschriebene CSS-Klassen.

Vorgehensweise:

  1. Download hier
  2. Abspeichern + entpacken im selben Verzeichnis, in dem die .html Datei liegt
  3. <link> zur all.css oder all.min.css im <head> der HTML-Seite einfügen
  4. anwenden wie beschrieben, hier gibt es auch einen Spickzettel

FontAwesome-Icons werden als <i>-Element mit CSS-Klassen eingebunden — oder per CSS-content mit dem Unicode-Zeichencode des Icons:

<!-- 1. CSS im <head> einbinden -->
<link href="fontawesome-free-5.15.2-web/css/all.min.css" rel="stylesheet">

<!-- 2. Icon per Klassen einfügen -->
<i class="fas fa-heart"></i>        <!-- solid -->
<i class="far fa-heart"></i>        <!-- regular (outline) -->
<i class="fas fa-heart fa-2x"></i>   <!-- doppelte Größe -->
/* 3. Icon per CSS ::before einfügen (z.B. für dekorative Trennlinien) */
hr::before {
    content: "\f567";               /* Unicode-Code des Icons */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;               /* 900 = solid, 400 = regular */
    display: inline-block;
    position: relative;
    top: -.4em;
}

Mal wieder eine Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • erster PUnkt
  • zweiter Punkt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.