Bootstrap Icons

icons-hero@2x

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.8.1/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.8.1/font/bootstrap-icons.css");

Lokal einbinden

Icon assets
Screenshot 1
Icon usage
Screenshot 2
FA icon field
Screenshot 3
Header field
Screenshot 4

Für eine lokale Installation, müssen zuerst die benötigten Dateien heruntergeladen werden.

Download latest ZIP dann die letzte Version (hier 1.8.1 - 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/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.
Font Awesome kann, wenn nicht benötigt, mit folgendem Setup deaktiviert werden:
page.footerData.61 >

Alternativ kann der gesamte i-Tag (<i class="bi bi-bootstrap-fill"></i>) z.B. im Header oder im RTE eingestzt werden (Screenshot 4).