Skip to main content

⭐ Bootstrap-Icons

Bootstrap Icons lokal mit Bootstrap 5 nutzen

🔗 Übersicht der Icons

Alle verfügbaren Icons findest du hier:
https://icons.getbootstrap.com

Dort kannst du nach Namen suchen (z.B. envelope, telephone, house) und den Klassennamen (bi bi-…) übernehmen.

📁 Lokale Ordnerstruktur

Lege die Dateien wie folgt im Projekt ab:

assets/bs5/bootstrap-icons/
    ├── bootstrap-icons.min.css
    └── fonts/
        ├── bootstrap-icons.woff
        └── bootstrap-icons.woff2

Wichtig:

  • bootstrap-icons.min.css liegt direkt im Ordner bootstrap-icons
  • Die Font-Dateien liegen im Unterordner fonts mit genau diesen Dateinamen
  • Mehr brauchst du nicht

🔗 Einbindung im MODX-Template

Im <head> deines MODX-Templates fügst du den CSS-Link ein:

Damit stehen dir alle Icons mit der Klasse bi bi-… zur Verfügung.

💡 Verwendung im HTML

Icons werden einfach als Inline-Element eingebunden:

<i class="bi bi-alarm"></i>
<i class="bi bi-telephone"></i>
<i class="bi bi-house"></i>
<i class="bi bi-geo-alt"></i>
<i class="bi bi-envelope"></i>

Du kannst Größe und Farbe wie normalen Text über CSS oder Inline-Styles steuern:

<i class="bi bi-alarm" style="font-size: 2rem;"></i>
<i class="bi bi-envelope" style="font-size: 1.2rem;"></i>

🧩 Typische Einsatzbereiche

  • Navigation (bi-house, bi-telephone)
  • Kontaktbereich (bi-envelope, bi-geo-alt)
  • Footer-Links (z.B. bi-shield-lock für Impressum/Datenschutz)
  • Hinweise, Meldungen, Status (z.B. bi-info-circle, bi-exclamation-triangle)

Beispiel-Footerzeile:

<i class="bi bi-envelope"></i>
<a href="[[~11]]">Kontakt</a>
|
<i class="bi bi-shield-lock"></i>
<a href="[[~5]]">Impressum - Datenschutz</a>
Back to top