Den Icon-Font benutzen

Jedes RockSolid Theme wird inklusive Icon-Font ausgeliefert. Im Ordner iconfont befinden sich 4 Schrift-Dateien in den Formaten TTF, EOT, WOFF und SVG, und eine HTML-Datei mit einer Übersicht über alle verfügbaren Icons.

Ihr Downloadpaket enthält eine übersichtliche Auflistung sämtlicher verfügbarer Icons. Dort können Sie die Codes für den Einsatz in HTML und CSS einfach entnehmen. Die Icons von standardmäßig vorgesehenen Inhalten, können Sie dank des RockSolid Icon Picker, mit einem Klick direkt im Backend bearbeiten.

HTML: CSS-Icons über das Contao-Backend in Ihre Texte und HTML einfügen

Um ein beliebiges Element mit einem Icon zu versehen ist alles was Sie tun müssen das sogenannte data-icon Attribut zu setzen. Die Zuordnung welcher Unicode zu welchem Icon gehört finden Sie in der mitgelieferten HTML-Übersicht.

Beispiel: Ein Listen-Element mit einem Icon versehen

<li data-icon="&#xe095;">Lorem Ipsum</li>

CSS: Icons mit CSS einfügen

Um ein Icon mit Hilfe von CSS einzufügen kommen die Pseudo-Elemente :before und :after zum Einsatz. Um ein Icon vor einem Element zu platzieren nutzen Sie :before um es danach auszugeben :after.

Bei Sass/SCSS steht das Icon-Mixin zur Verfügung

li.iconCheckmark:before{
    @include icon("\e095", 16px, 1);
    margin-right: 5px;
}

Beispiel eines mit CSS vor einem Element platzierten Icons

li.iconCheckmark:before{
    font: 16px/1 "RockSolid Icons";
    content: "\e095";
    display: inline-block;
    position: relative;
    margin-right: 5px;
}

Den Icon-Font erweitern/anpassen

Sie können Tools wie IcoMoon, Fontello oder Fontastic verwenden um den Icon-Font mit eigenen Icons zu erweitern. Wichtig ist dabei darauf zu achten, dass die Zuordnung der bestehenden Symbole gleich bleibt.

FAQ: Häufige Fragen

Beim Editieren (Quelltextansicht) werden alle Icons als ▢ angezeigt!

Contao wandelt die Icon-Codes in UTF-8-Zeichen um, die in der Quelltextansicht als Quadrat oder Fragezeichen dargestellt werden. Im Frontend sollten die Icons korrekt angezeigt werden.

Warum zeigt der Internet Explorer die Icons nicht an?

Vermutlich arbeiten Sie auf einem System mit angepassten Sicherheitseinstellungen, die den Download von Schriftartdateien verbieten. Sie können die Einstellung ändern indem Sie in den Internetoptionen unter Sicherheit › Internet › Stufe anpassen › Download den Schriftartdownload aktivieren oder indem Sie die Sicherheitseinstellungen auf die Standardstufe zurücksetzen. Hinweis: Diese Einstellung ist nicht standardmäßig und betrifft nur Benutzer mit angepassten Sicherheitseinstellungen.

Ich habe den Theme-Ordner umbenannt, nun werden die Icons nicht mehr angezeigt?

Wenn Sie den Theme-Ordner umbenannt haben, müssen auch die Pfade im CSS bzw. Sass (je nach dem was Sie einsetzen) angepasst werden. Die betroffene CSS-Datei main.css finden Sie im Ordner /files/THEMENAME/css/main.css.

Gab es Unklarheiten oder haben Sie einen Fehler in diesem Artikel entdeckt? Geben Sie uns Bescheid und hinterlassen Sie Ihr Feedback.