Custom DuoTone Icons
Custom DuoTone Icons are not part of the FontAwesome Pro package and were created specifically for LabXpert.
These icons are available as background images in the CSS file and can be used by applying the appropriate class to a
<span>element, e.g.,<span class="c-duotone-icon -rezeptur"></span>.DuoTone Icons that are not custom-made and available in FontAwesome Pro can also be used via the web font, see FontAwesome Icons.
Used in Circular Icons, Main Icon Headlines, Menu Buttons, and more.
<span class="c-duotone-icon -lg -rezeptur"></span>
Usage
TIP
All the following icons are available as background images in the CSS file and can be used by applying the appropriate class to a <span> element, e.g., <span class="c-duotone-icon -rezeptur"></span>. We've also included some default FontAwesome Pro icons here to make it easier to find and use them.
.c-duotone-icon.-[icon-class-name][_dark/_highlighted]
Size Modifiers
Extra-Small is the default size. You can add the following classes to change the size of the icon:
| Size Modifier | Example | Class |
|---|---|---|
| Extra-Small | .-xs | |
| Small | .-sm / .fa-2x | |
| Medium | .-md / .fa-3x | |
| Large | .-lg / .fa-4x | |
| Extra-Large | .-xl / .fa-4x |
Disabled State
.c-duotone-icon.-is-disabled
List of all DuoTone Icons
TIP
Use color style Dark for Main Icon Headlines.
| Name | Modifier Class | Default | Dark | Highlighted |
|---|---|---|---|---|
| Abfüllung | -abfuellung | – | ||
| Abfüllanweisung | -abfuellanweisung | – | ||
| Ausgangsstoffprüfung/AP | -ap | – | ||
| Archiv | -archiv | |||
| Augentropfen | -augentropfen | – | – | |
| Cannabis | -cannabis | – | ||
| DAC/NRF | -dac-nrf | – | – | |
| Defektur | -defektur | |||
| Einstellungen | -einstellungen | – | ||
| Erneut/Repeat | -erneut | - | ||
| E-Signatur | -esignatur | – | ||
| E-Rezept | -erezept | – | ||
| Fertigarzneiprüfung/FAM | -fam | – | ||
| FAQ/Arbeitshilfen | -faq | – | ||
| Flüssigkeit | -fluessigkeit | – | – | |
| Forum | -forum | – | ||
| Gerätemanager | -geraetemanager | – | ||
| Individuelle Vorlage | -individuelle-vorlage | – | – | |
| Info / Informationen | -info | – | ||
| Kapseln | -kapseln | – | – | |
| Konditionen/Preise | -konditionen | – | ||
| Lagerorte | -lagerorte | – | ||
| Liste(n) | -listen | |||
| LabXpert Logo | -labxpert | |||
| Mitarbeiter | -mitarbeiter | – | ||
| Medizinproduktprüfung/MP | -mp | – | ||
| Neu/Hinzufügen | -neu | |||
| Packmittel | -packmittel | – | ||
| Partner | -partner | – | ||
| PDF (Handbuch) | -pdf | – | ||
| Papierkorb | -papierkorb | – | ||
| Prüfung | -pruefung | – | ||
| Pulver | -pulver | – | – | |
| Rezeptur | -rezeptur | |||
| Schmelzpunktbestimmer | -schmelzpunktbestimmer | – | – | |
| Taxierung | -taxierung | |||
| Tee | -tee | – | – | |
| TOPITEC | -topitec | – | – | |
| Unguator | -unguator | – | – | |
| Updates | -updates | – | ||
| Video | -video | – | ||
| Waage | -waage | – | – | |
| Zäpfchen | -zaepfchen | – | – |
Kit DuoTone Icons
[WORK IN PROGRESS]
Using the custom font awesome duotone icons from the kit, instead of the SVGs.
- TODO: Fix size differences
- TODO: Add all common icons to the kit?
Usage:fa-kit-duotone + fa- + icon-name + h-color-primary[-dark]
| Name | Code Example | Preview |
|---|---|---|
| Abfüllung | <i class="fa-kit-duotone fa-abfuellung-duo"></i> | |
| Abfüllanweisung (TODO) | <i class="fad fa-file-lines"></i> | |
| Ausgangsstoffprüfung/AP | <i class="fad fa-microscope"></i> | |
| Archiv | <i class="fa-kit-duotone fa-archiv-duo"></i> | |
| Augentropfen | <i class="fa-kit-duotone fa-augentropfen-duo"></i> | |
| Cannabis | <i class="fad fa-cannabis"></i> | |
| DAC/NRF | <i class="fa-kit-duotone fa-dac-nrf-duo"></i> | |
| Defektur | <i class="fa-kit-duotone fa-defektur-duo"></i> | |
| Einstellungen | <i class="fad fa-cog"></i> | |
| Erneut/Repeat | <i class="fad fa-rotate-left"></i> | |
| E-Signatur | <i class="fad fa-file-signature"></i> | |
| E-Rezept | <i class="fa-kit-duotone fa-erezept-duo"></i> | |
| FAM | <i class="fa-kit-duotone fa-fam-duo"></i> | |
| FAQ/Arbeitshilfen | <i class="fad fa-message-question"></i> | |
| Flüssigkeit | <i class="fa-kit-duotone fa-fluessigkeit-duo"></i> | |
| Forum | <i class="fad fa-messages"></i> | |
| Gerätemanager | <i class="fad fa-server"></i> | |
| Individuelle Vorlage | <i class="fad fa-file-pen"></i> | |
| Info / Informationen | <i class="fad fa-info-circle"></i> | |
| Kapseln | <i class="fad fa-capsules"></i> | |
| Konditionen/Preise | <i class="fad fa-list-check"></i> | |
| Lagerorte | <i class="fad fa-box-check"></i> | |
| Liste(n) | <i class="fad fa-clipboard-list"></i> | |
| LabXpert Logo | <i class="fa-kit-duotone fa-logo-labxpert-duo"></i> | |
| Mitarbeiter | <i class="fad fa-users"></i> | |
| Medizinprodukt | <i class="fad fa-hand-holding-medical"></i> | |
| Neu/Hinzufügen | <i class="fad fa-circle-plus"></i> | |
| Packmittel | <i class="fa-kit-duotone fa-packmittel-duo"></i> | |
| Partner | <i class="fad fa-handshake"></i> | |
| PDF (Handbuch) | <i class="fad fa-file-pdf"></i> | |
| Papierkorb | <i class="fad fa-trash"></i> | |
| Prüfung | <i class="fad fa-file-check"></i> | |
| Pulver | <i class="fa-kit-duotone fa-pulver-duo"></i> | |
| Rezeptur | <i class="fad fa-mortar-pestle"></i> | |
| Schmelzpunkt | <i class="fa-kit-duotone fa-schmelzpunktbestimmer-duo"></i> | |
| Taxierung | <i class="fad fa-euro"></i> | |
| Tee | <i class="fa-kit-duotone fa-tee-duo"></i> | |
| TOPITEC | <i class="fa-kit-duotone fa-topitec-duo"></i> | |
| Unguator | <i class="fa-kit-duotone fa-unguator-duo"></i> | |
| Updates | <i class="fa-duotone fa-solid fa-clock-rotate-left"></i> | |
| Video | <i class="fad fa-circle-play"></i> | |
| Waage | <i class="fad fa-scale-balanced"></i> | |
| Zäpfchen | <i class="fa-kit-duotone fa-zaepfchen-duo"></i> |