Font Awesome 7.3.1 Varianten mit Beispiel Dolphin
Größen
<i class="fas fa-dolphin fa-2x"></i>
Animationen
<i class="fas fa-dolphin fa-2x fa-spin text-primary"></i>
Größe + Animation + Farbe
<i class="fas fa-dolphin fa-5x fa-bounce text-success"></i>
Duotone
<i class="fa-duotone fa-solid fa-dolphin fa-5x text-success"></i>
Pro+-Packs
<i class="fa-jelly fa-regular fa-user"></i>
<i class="fa-jelly-duo fa-regular fa-user"></i>
<i class="fa-jelly-fill fa-regular fa-user"></i>
<i class="fa-notdog fa-solid fa-headphones fa-beat"></i>
<i class="fa-notdog-duo fa-solid fa-headphones fa-beat"></i>
<i class="fa-sharp fa-regular fa-headphones fa-beat"></i>
<i class="fa-chisel fa-regular fa-headphones fa-beat"></i>
<i class="fa-etch fa-solid fa-headphones fa-beat"></i>
<i class="fa-graphite fa-thin fa-headphones fa-beat"></i>
<i class="fa-mosaic fa-solid fa-headphones fa-beat"></i>
<i class="fa-pixel fa-regular fa-headphones fa-beat"></i>
<i class="fa-slab fa-regular fa-headphones fa-beat"></i>
<i class="fa-slab-press fa-regular fa-headphones fa-beat"></i>
<i class="fa-slab-duo fa-regular fa-headphones fa-beat"></i>
<i class="fa-thumbprint fa-light fa-headphones fa-beat"></i>
<i class="fa-utility fa-semibold fa-headphones fa-beat"></i>
<i class="fa-utility-duo fa-semibold fa-headphones fa-beat"></i>
<i class="fa-utility-fill fa-semibold fa-headphones fa-beat"></i>
<i class="fa-vellum fa-solid fa-headphones fa-beat"></i>
<i class="fa-whiteboard fa-semibold fa-headphones fa-beat"></i>
<i class="fa-duotone fa-light fa-balloon fa-float"></i>
<i class="fa-jelly-duo fa-regular fa-user"></i>
<i class="fa-jelly-fill fa-regular fa-user"></i>
<i class="fa-notdog fa-solid fa-headphones fa-beat"></i>
<i class="fa-notdog-duo fa-solid fa-headphones fa-beat"></i>
<i class="fa-sharp fa-regular fa-headphones fa-beat"></i>
<i class="fa-chisel fa-regular fa-headphones fa-beat"></i>
<i class="fa-etch fa-solid fa-headphones fa-beat"></i>
<i class="fa-graphite fa-thin fa-headphones fa-beat"></i>
<i class="fa-mosaic fa-solid fa-headphones fa-beat"></i>
<i class="fa-pixel fa-regular fa-headphones fa-beat"></i>
<i class="fa-slab fa-regular fa-headphones fa-beat"></i>
<i class="fa-slab-press fa-regular fa-headphones fa-beat"></i>
<i class="fa-slab-duo fa-regular fa-headphones fa-beat"></i>
<i class="fa-thumbprint fa-light fa-headphones fa-beat"></i>
<i class="fa-utility fa-semibold fa-headphones fa-beat"></i>
<i class="fa-utility-duo fa-semibold fa-headphones fa-beat"></i>
<i class="fa-utility-fill fa-semibold fa-headphones fa-beat"></i>
<i class="fa-vellum fa-solid fa-headphones fa-beat"></i>
<i class="fa-whiteboard fa-semibold fa-headphones fa-beat"></i>
<i class="fa-duotone fa-light fa-balloon fa-float"></i>
Font Awesome Pro Einbindung
Font Awesome wird hier modular eingebunden.
Die benötigten CSS-Dateien werden einzeln geladen.
all.css und all.js werden nicht verwendet,
da sie die Pro+-Packs in dieser Installation überschreiben können.
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/brands.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/duotone.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/brands.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/duotone.css">
Font Awesome Pro+:
Die einzelnen Font Awesome Familien und Pro+-Packs werden
separat eingebunden.
all.css und all.js werden nicht geladen,
da sie in dieser Installation die Pro+-Definitionen überschreiben
können.
Dadurch bleiben Notdog, Jelly, Sharp, Chisel, Etch, Graphite,
Mosaic, Pixel, Slab, Thumbprint, Utility, Vellum, Whiteboard
und die weiteren installierten Packs erhalten.
Pro+-Packs
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/brands.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/duotone.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/notdog-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/notdog-duo-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/chisel-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/etch-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/graphite-thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/jelly-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/jelly-duo-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/jelly-fill-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/mosaic-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/pixel-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-press-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-duo-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-press-duo-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/thumbprint-light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/utility-semibold.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/utility-duo-semibold.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/utility-fill-semibold.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/vellum-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/whiteboard-semibold.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/brands.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/duotone.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/notdog-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/notdog-duo-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/sharp-duotone-thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/chisel-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/etch-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/graphite-thin.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/jelly-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/jelly-duo-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/jelly-fill-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/mosaic-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/pixel-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-press-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-duo-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/slab-press-duo-regular.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/thumbprint-light.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/utility-semibold.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/utility-duo-semibold.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/utility-fill-semibold.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/vellum-solid.css">
<link rel="stylesheet" href="https://kumhofer.at/fontawesome/css/whiteboard-semibold.css">
Weitere Beispiele: Beispiele
Icons suchen: https://fontawesome.com/icons
Animating Icons: https://fontawesome.com/docs/web/style/animate
Icons testen: Testseite
2005 - 2026 by
Mst. Christian Kumhofer
