Font Awesome Icons 🎉

TIP

We currently use only the following styles: duoTone, solid, regular (and sometimes, for very large icons light):

Custom Icons:

• Solid and regular custom icons: Custom Icons
• Additionally, we have created some custom DuoTone icons which currently cannot be included in the FA kit but are available as SVGs in the project. See: Custom DuoTone Icons

Overview

• Overview
• Installation
• Basic Usage
• Custom Icons
• Size Modifiers
• Helper Classes
• Animations
  • Animation Examples
• Add Icons per Class
• Icon Styleguide
• Development
  • Icon-Map
  • Icon SCSS-Variable

Installation

WARNING

Configure access for your project first by creating a .npmrc file, see https://fontawesome.com/kits/dd3a73c5b9/package.

To install or update the kit in a project, use the following commands:

npm install --save '@awesome.me/kit-dd3a73c5b9@latest'npm update '@awesome.me/kit-dd3a73c5b9'

The webfonts from this NPM package must be included in public/webfonts and the CSS files from the kit are imported in _fa-icon.scss.

Basic Usage

You can use the following classes to include icons in your project:
fa-duotone, fa-solid, fa-regular, fa-light + fa-[icon-name]

(or fad, fas, far, fal + fa-[icon-name])

For a list of all available icons, see: https://fontawesome.com/icons

<i class="fad fa-user fa-3x h-color-primary-light"></i>
<i class="fas fa-user fa-3x"></i>
<i class="far fa-user fa-3x"></i>
<i class="fal fa-user fa-3x"></i>

Custom Icons

Use the following classes to include custom icons in your project:
.fa-kit.fa-[icon-class-name]

Name	Icon	Icon-Class
Abfüllung		fa-abfuellung[-regular]
Archiv		fa-archiv[-regular]
Augentropfen		fa-augentropfen[-regular]
DAC/NRF		fa-dac-nrf[-regular]
Defektur		fa-defektur[-regular]
Fertigarzneimittel (FAM)		fa-fam[-regular]
Flüssigkeit		fa-fluessigkeit[-regular]
LabXpert Logo		fa-logo-labxpert
Packmittel		fa-packmittel[-regular]
Pulver		fa-pulver[-regular]
Schmelzpunktbestimmer		fa-schmelzpunktbestimmer[-regular]
Tee		fa-tee[-regular]
TOPITEC		fa-topitec
Unguator		fa-unguator
Zäpfchen		fa-zaepfchen[-regular]

Size Modifiers

You can use the following classes to change the size of the icons:
.fa-4x, .fa-3x,, .fa-2x, .fa-1-5x
More: Sizing Icons

Show Code

<i class="fas fa-circle-info fa-4x"></i>
<i class="fas fa-circle-info fa-3x"></i>
<i class="fas fa-circle-info fa-2x"></i>
<i class="fas fa-circle-info fa-1-5x"></i>

Helper Classes

See Styling with Font Awesome

• .fa-rotate-[90, 180] or specific value: .fa-rotate-by+ style="--fa-rotate-angle: 45deg;"

• .fa-flip-[horizontal, vertical, both]

• .fa-fw - for fixed widths

Animations

See Animations with Font Awesome

Animation Examples

.fa-beat

Show Code

<div class="fa-3x">
  <i class="fas fa-circle-plus fa-beat"></i>
  <i class="fas fa-heart fa-beat"></i>
  <i class="fas fa-heart fa-bounce"></i>
  <i class="fas fa-heart fa-beat-fade"></i>
  <i class="fas fa-heart fa-fade"></i>
</div>

Add Icons per Class

Arrow Icons can be added per modifier class to links or buttons. See Buttons > Arrow Icons

.-icon-right[-icon-left, -icon-up, -icon-down].-icon-arrow

<button class="c-btn -small -secondary -icon-right -icon-arrow">
    <span class="c-btn__text">-icon-right -icon-arrow</span>
</button>
<button class="c-btn -small -primary -icon-left -icon-arrow">
    <span class="c-btn__text">-icon-right -icon-arrow</span>
</button>
<button class="c-btn -small -secondary -icon-up -icon-arrow">
    <span class="c-btn__text">-icon-up -icon-arrow</span>
</button>
<button class="c-btn -small -primary -icon-down -icon-arrow">
    <span class="c-btn__text">-icon-down -icon-arrow</span>
</button>

Rotate arrow icon via modifier .-rotate-arrow.

Icon Styleguide

TIP

Example icon classes for common actions and content.

Show Icon-Styleguide

Action/Content	Icon	Class-Name
"Suche"		fa-magnifying-glass
"Bearbeiten"		fa-pen
"Speichern"		fa-check
"Abbrechen/Schließen"		fa-times
"Hinzufügen"		fa-plus
"Löschen"		fa-trash
"Löschen (alternative)"		fa-xmark
"Download"		fa-download
"Neu laden"		fa-rotate
"Rückgängig"		fa-rotate-left
"Einstellungen"		fa-gear
"Multi-Aktion"		fa-ellipsis-vertical
"Ausklappen/Öffnen"		fa-caret-right
"Einklappen/Schließen"		fa-caret-down
"Fehlermeldung/Warnung"		fa-exclamation-triangle
"Information"		fa-circle-info
"Frage"		fa-circle-question
"Verlauf/History"		fa-clock-rotate-left
"Zurücksetzen"		fa-arrow-rotate-left
"Benutzer/Profil"		fa-circle-user
"Login"		fa-right-to-bracket
"Logout"		fa-right-from-bracket
"Kontakt"		fa-envelope

Development

Icon-Map

In the SCSS-files you can use the $fa-icon-map if you need a font-awesome icon as pseudo-element. Common icons are included in this map, so you don't have to look for the unicode.

(See core/typo/_icon-font.scss for the full list.)

Show Code

$fa-icon-map: (
  arrow-left: '\f060',
  arrow-right: '\f061',
  arrow-down: '\f063',
  arrow-down-to-line: '\f33d',
  arrow-up: '\f062',
  ...
);

/**
 * usage: @include fa-icon-select("minus");
 */
@mixin fa-icon-select($name) {
  content: map-get($fa-icon-map, $name);
}

Icon SCSS-Variable

// selector variables
// use like this: #{$fa-selector}

$fa-selector: "[class^=" fa "]";
$fa-icon-selector: "[class^=" fa "]::before";