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).

Infos:

https://icons.getbootstrap.com/