Icon Basis-Klassen

Grundlegende Icon-Klassen:

🏠 .icon (Standard)
🏠 .icon-home (spezifisches Icon)
👤 .icon-user (weiteres Icon)
🔍 .icon-search (Such-Icon)

Inline Icons (span-Elemente)

Inline Icons in Text:

Das ist ein Text mit einem 📧 Icon mittendrin.

Noch ein Beispiel mit ⭐ Stern und ❤️ Herz Icons.

CSS-Eigenschaften für Inline Icons:

display: inline-block
vertical-align: middle
height: 1em (passt sich an Schriftgröße an)
width: 1em

Block Icons (div-Elemente)

Block Icons (quadratisch):

🎯

⚡

🚀

Block Icons mit .d-block Klasse:

🔥

CSS-Eigenschaften für Block Icons:

width: 100% (oder spezifische Breite)
position: relative
Quadratisch: padding-bottom: 100% für 1:1 Verhältnis
SVG positioniert: position: absolute, top: 0, left: 0

Icon Größen ($icon-sizes)

Vordefinierte Größen für Inline Icons (span):

🌟 .icon-s (24px)
🌟 .icon-s2 (30px)
🌟 .icon-m (40px)
🌟 .icon-l (80px)

Vordefinierte Größen für Block Icons (div):

🎨

Größen-Definitionen aus $icon-sizes:


		s: 24px

		s2: 30px

		m: 40px

		l: 80px

Icons in Buttons

Button mit Icon Links (.btn-icon-left):

Button mit Icon Rechts (.btn-icon-right):

Button mit Icon Oben (.btn-icon-above):

CSS für Button Icons:


		.btn-icon-left > .icon { margin-right: 10px; }

		.btn-icon-right > .icon { margin-left: 10px; }

		.btn-icon-above { flex-direction: column; height: 70px; }

		.btn-icon-above > .icon { margin-bottom: 10px; }

Icons in Links

Link-Btn mit Icons:

📁 ORDNER ÖFFNEN DOWNLOAD ⬇️

Standard Links mit Icons:

📄 Dokument herunterladen

🔗 Externe Website besuchen

SVG Icons

SVG Icons in Icon-Containern:

CSS für SVG Icons:

overflow: visible
flex: 0 0 auto
align-self: center
height: auto
transform: inherit

Bootstrap Icons Font

Bootstrap Icons Font-Face:

Das Framework lädt die Bootstrap Icons als Webfont:


		@font-face {

		  font-family: "bootstrap-icons";

		  src: url("./Fonts/bootstrap-icons.woff2") format("woff2"),

		       url("./Fonts/bootstrap-icons.woff") format("woff");

		}

Verwendung von Bootstrap Icons:

Diese können als Icon-Klassen verwendet werden (je nach Implementierung).

Collapse Icons (JavaScript)

Collapse Icon mit Rotation:

CSS für Collapse Icons:


		.js-collapse-icon svg {

		  transform: rotate(0deg);

		  transition: transform 200ms ease;

		}

		[aria-expanded='true'] .js-collapse-icon svg {

		  transform: rotate(180deg);

		}

Alle verfügbaren Icon-Klassen

Basis-Klassen:


		.icon - Standard Icon-Container

		.icon-* - Spezifische Icon-Klassen

		[class^="icon-"] - Alle Klassen die mit "icon-" beginnen

		[class*=" icon-"] - Alle Klassen die " icon-" enthalten

Größen-Klassen:


		.icon-s (24px)

		.icon-s2 (30px)

		.icon-m (40px)

		.icon-l (80px)

Button Icon-Klassen:


		.btn-icon-left - Icon links vom Text

		.btn-icon-right - Icon rechts vom Text

		.btn-icon-above - Icon über dem Text

Link Icon-Klassen:


		.link-btn.icon-left - Link-Button mit Icon links

		.link-btn.icon-right - Link-Button mit Icon rechts

JavaScript Icon-Klassen:


		.js-collapse-icon - Collapse Icon mit Rotation

Element-Typen für Icons:


		<span class="icon"> - Inline Icon (1em × 1em)

		<div class="icon"> - Block Icon (quadratisch)

		<span class="icon d-block"> - Inline Icon als Block

zurück zur Übersicht