Digezz Icon Font verwenden

Der Icon Font kann auf verschiedene Arten eingebunden werden. Bei allen Varianten muss im HTML-Code die passende CSS-Klasse verwendet werden (siehe CSS Class Mapping).

Vor Titel oder Text

<h2 class="icon-thumbup"> Als Klasse von Tag</h2>

Einem bestehenden HTML-Tag (z.B. h2 oder p) wird eine Klasse zugeordnet. Das Icon erscheint vor dem Text in derselben Grösse und Farbe.

Im Text (span)

wurde zum gekrönt. Er schwebt auf .

 

<p><span class="icon-ueli"></span> wurde zum <span class="icon-crown"></span> gekrönt. Er schwebt auf <span class="icon-cloud"></span><span class="icon-seven"></span>.</p>

Die Icons können inline im Text verwendet werden. Dafür wird einem span-Tag die jeweilige Klasse vergeben.

Als Block-Element (div)

 

<div class="icon-beer"></div>

Die Icons können auch als eigenständiges Block-Element verwendet werden. Dafür wird einem div-Tag die jeweilige Klasse vergeben.

 

 

 

---

CSS Class Mapping

Alle Icons mit ihren CSS-Klassen in der Übersicht. Die Klasse setzt sich aus zusammen aus icon- und dem jeweiligen Begriff, z.B. icon-cloud.