Bootstrap Icons
Installation
Bootstrap enthält über 1.600 hochwertige Icons, die im SVG-, SVG-Sprite- oder Webfonts-Format verfügbar sind.
Der Vorteil der Verwendung von Font-Icons ist, dass die Icons in jeder beliebigen Farbe und Größe erstellt werden können.
Der einfachste Weg, Bootstrap-Icons einzubinden, ist die Verwendung eines CDN-Links.
Dieser CDN-Link verweist im Grunde auf eine entfernte CSS-Datei, die alle notwendigen Klassen zur Erzeugung von Schrift-Icons enthält.
CDN-Link
Im Setup:
page {
includeCSS {
bsicons = cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css
bsicons.external = 1
}
}... oder als @import in der eigenen CSS-Datei:
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css");Lokal einbinden
Für eine lokale Installation, müssen zuerst die benötigten Dateien heruntergeladen werden.
Download latest ZIP dann die letzte Version (hier 1.11.2 - Screenshot 1) herunterladen und entpacken!
Alle Dateien aus dem Verzeichnis (z.B.) nach /fileadmin/bootstrap-icons/ kopieren und mit TS einbinden:
page {
includeCSS {
bsicons = /fileadmin/bootstrap-icons/font/bootstrap-icons.css
}
}Icon Nutzung
Das gewünschte Icon hier suchen: https://icons.getbootstrap.com/
und auf die Detail-Ansicht wechseln (Screenshot 2).
Wenn in der EM config "Font Awesome" aktiviert wurde, dann steht ein entsprechendes Input Feld zur Verfügung (Screenshot 3). Hier kann folgendes eingegeben werden bi bi-bootstrap-fill damit das Bootstrap Logo angezeigt wird.
Alternativ kann der gesamte i-Tag (<i class="bi bi-bootstrap-fill"></i>) z.B. im Header oder im RTE eingestzt werden (Screenshot 4).
