SVG Icons

Test SVG-Icon pixabay

Saubere Struktur, klare Trennung

Du hast volle Kontrolle: Layout, Inhalte, Navigation – alles ist sauber getrennt und nachvollziehbar. Ideal, wenn du deine Seiten regelmäßig pflegst oder anpassen möchtest.

zur Startseite Home

Telefon Mobil

Icon Haken grün im Text testen (soll vor testen stehen)

Infotext zu Icon Position usw. im Stylesheet festlegen (.icon-text)

SVG einbinden - Varianten

SVG-Icons mit Text einbinden

Info zur eingebunden Datei: info--blue.svg (902,0 Byte, 24x24 px)

die SVG-Grafik kann im HTML-Code NICHT größer skaliert werden
die SVG-Grafik kann nur im CSS-Code größer und kleiner skaliert werden

SVG-Icon per HTML einbinden und mit CSS skalieren bzw. stylen

<div class="svg-symbol"></div>

CSS (layout1_test.css) kann beliebig verlustfrei skaliert werden

/* SVG-Bildateien einbinden Test */
.svg-symbol {
  width: 50px;
  height: 50px;
  background-image: url("../icons/info--blue.svg"); /* 24x24px */
  background-size: contain;
  background-repeat: no-repeat;
}

CSS (layout1_test.css) SVG-Icons nur mir CSS einbinden und skalieren

.svg-symbole {
  width: 200px;
  height: 50px;
  background-image: url("../icons/sprite.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

HTML

<div class="svg-symbole"></div>

Was ist ein CSS-Sprite?

Ein CSS-Sprite ist eine einzige Bilddatei, die mehrere Icons nebeneinander oder untereinander enthält. Du blendest über background-position jeweils den gewünschten Teil des Bildes ein.

Das reduziert HTTP-Requests und ist schnell in der Anwendung.

Projektstruktur

/files/contao5_bluepages2025/themes/theme1/
│
├── css/
│ └── styles.css
├── icons/
│ └── sprite.svg ← enthält alle Icons nebeneinander
└── test.html (Code Inhalt als HTML im Backend einbinden)

CSS (layout1_test.css)

/* SVG-Sprite einbinden Test */
.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url(../icons/sprite.svg);
  background-repeat: no-repeat;
  background-size: 200px 50px; /* Gesamtgröße des Sprites */
}

.icon.info {
  background-position: 0 0;
}

.icon.warning {
  background-position: -50px 0;
}

.icon.check {
  background-position: -100px 0;
}

.icon.close {
  background-position: -150px 0;
}

HTML (Backend) alle Symbole sind eingeblendet - mit CSS steuerbar

<div class="icon info"></div>
<div class="icon warning"></div>
<div class="icon check"></div>
<div class="icon close"></div>

Vorteile

Schnell - Nur eine Bilddatei wird geladen
Klar strukturiert - Alle Icons zentral in einem Sprite
Flexibel - Über background-position kannst du beliebig viele Icons definieren
Erweiterbar - Neue Icons einfach im SVG hinzufügen und CSS anpassen

HTML (Backend) nur die mit class="icon name" ausgewählte Symbole werden eingeblendet

<div class="icon info"></div>
<div class="icon warning"></div>

Einzelne Icons im CSS flexibel aktivieren oder deaktivieren, z. B. über zusätzliche Klassen, Conditions oder States.

CSS (layout1_test.css) - Methode 1: Sichtbarkeit per Klasse steuern (.visible, .hidden)

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url(../icons/sprite.svg);
  background-repeat: no-repeat;
  background-size: 200px 50px;
}

/* Standard-Icons */
.icon.info    { background-position: 0 0; }
.icon.warning { background-position: -50px 0; }
.icon.check   { background-position: -100px 0; }
.icon.close   { background-position: -150px 0; }

/* Sichtbarkeit steuern */
.hidden {
  display: none !important;
}

HTML (Backend)

<div class="icon info"></div>           <!-- wird angezeigt -->
<div class="icon warning hidden"></div> <!-- wird NICHT angezeigt -->
<div class="icon check"></div>          <!-- wird angezeigt -->
<div class="icon close hidden"></div>   <!-- wird NICHT angezeigt -->