Icons als Hintergrundbild

[Matthias Scharwies]

Servus!

Ok, die Frage war umständlich formuliert.

Gibt es eine Möglichkeit, HTML-Befehlen die häufig verwendet werden, zu Beginn in einer Variablen zu definieren, um diese dann im darauffolgenden Verlauf einzusetzten, anstatt des Langen Befehls.

Der der Befehl fürs einfügen von Bildern (inkl. url) recht lang ist, wird so die Aufstellung im Quellcode sehr schnell unübersichtlich.

So etwas könntest du mit JavaScript programmieren, aber nicht als Anfänger.

[GELB] und [TOR] soll[en] durch ein Icon ersetzt werden.

Das war genau meine Antwort: diesmal mit Links und einem Stück BeispielCode:

Wenn dein Bild ein Icon ist, könntest du dem Element davor eine Klasse geben, die dann per CSS einen linken Rand und dort die Grafik als Hintergrundbild festlegt.

<p>Müller kriegt erst eine <span class="gelb">gelbe Karte</span>, schießt aber 10 min später ein <span class="tor">Tor</span>!</p>

.gelb {
  padding-left:10px;
  background-image: url('gelbe_karte.jpg') left no-repeat;
}

.tor {
  musst du selber machen
}

Da die Icons Teil der Präsentation sind, werden sie im CSS und nicht als Bild per <img> im Inhalt eingebunden.

Herzliche Grüße

Matthias Scharwies