IcoMoon für Joomla! 3.0 um eigene Icons erweitern

Die Umstellung von Joomla! 2.5 auf Joomla! 3 hat insbesondere am Look and Feel von Joomla! Webseiten einige tiefgreifende Änderungen gebracht. Bereits auf den ersten Blick fällt auf, dass viele Label durch hübsche kleine Icon ersetzt worden sind. Hier erkläre ich Ihnen, wie Sie dieses Feature für Ihr eigenes Template nutzen können.

Icon-Schrift statt Bilder

Eine kurze Recherche im Quellcode der Seite zeigt, dass diese Icons keine kleinen Icon-Bilder sind, sondern durch folgenden HTML- und CSS-Code erzeugt werden.

<i class="icon-new icon-white"> </i>

.icon-new:before {
	content: "\2a";
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    width: 14px;
}

D.h. die Icons sind Schriftzeichen der Schrift IcoMoon, die mit Hilfe von CSS3 Selektoren in das i-Element mit der Klasse icon- eingefügt werden. Das Konzept ist einfach und brilliant.

Der Mechanismus

  • Das Joomla! Framework fügt überall dort, wo ein Icon angezeigt werden soll ein leeres Element ein (span oder i).
  • Dieses hat ein class-Attribut das aus dem festen Bestandteil "icon-" und einem variablen Bestandteil, im Beispiel oben "new", besteht.
  • Im CSS wird für alle Element, die ein class-Attribut haben, das entweder mit "icon-" beginnt oder den String " icon-" enthält der Schrifttyp auf IcoMoon gesetzt.
  • Abhängig vom variablen Teil das class-Attributs wird mit Hilfe der CSS Eigenschaft "content" das zum Icon passende Schriftzeichen eingefügt.
  • Das New-Icon beispielsweise entspricht dem Unicode PUA-Code "\2a". (PUA = Private Use Area und definiert einen Codebereich in dem eigene Unicode Schriftzeichen definiert werden können, die nicht mit dem Standardsatz in Konlikt geraten.)

Vorteile der Verwendung einer Schrift zum Anzeigen von Icons

Einige Vorteile der Verwendung einer Schrift wie IcoMoon zum Anzeigen von Icons liegen auf der Hand.

  • Große Auswahl an professionellen, gut aussehenden Icon
  • Keine zeitaufwendige Anpassung von Bilddateien nötig!
    • Da das Icon ein Schriftzeichen ist kann seine Farbe über die CSS-Eigenschaft "color" direkt verändert werden.
    • Auch die Icon-Größe kann über eine CSS-Eigenschaft - "font-size" - direkt verändert werden. Da es sich um eine skalierbare Schrift handelt, ist das Icon in jeder Größe scharf.
  • Performance - da die Schrift nur einmal geladen wird und nicht für jedes Icon ein eigenes Bild geladen werden muss sind wesentlich weniger Requests nötig.

Wie kann ich IcoMoon nun in meinem eigenen Template verwenden?

Trotzdem kann die Verwendung von IcoMoon bei der Entwicklung von Joomla! Templates im ersten Anlauf etwas unübersichtlich und schwierig sein. Insbesondere ergaben sich für mich zwei Probleme.

1. Aus den PUA-Schriftzeichen lässt sich nicht erkennen, wie das zugehörige Icon aussieht. Obwohl die Namensgebung im class-Attribut möglichst selbsterklärend gewählt ist, weiß man also nicht genau, welches class-Attribut man verwenden muss, wenn man im Template ein Icon anzeigen will.

Deshalb habe ich eine Auflistung erstellt, die Icon, icon-Klasse und Wert der content-Eigenschaft für alle Schriftzeichen, die mit der Joomla-Installation kommen, übersichtlich zusammenfasst. Mit Hilfe dieser Information kann jedes Schriftzeichen ganz einfach ins Template eingefügt werden, indem ein leeres span- oder i-Element mit dem richtigen class-Attribut eingefügt wird.

2. Wie kann ich Icons - z.B. ein Facebook-Icon - verwenden, die im Umfang der IcoMoon-Schrift des Joomla! 3 Frameworks nicht vorhanden sind?

Um diese Frage zu klären habe ich mich etwas genauer mit der Schrift IcoMoon und deren Schriftgenerator auseinandergesetzt und bin begeistert von dessen Einfachheit und Leistungsfähigkeit.

IcoMoon ist eine skalierbare Vektor-Schrift, deren "Buchstaben" Icons anzeigen. Mit Hilfe der IcoMoon App auf der IcoMoon Homepage, kann man sich aus den zur Verfügung stehenden Icon die aussuchen, die man für seine Webseite verwenden möchte und daraus seine eigene Schrift generieren lassen.

Eigene Schrift zusammenstellen

Update für Joomla! 3.2 und höher

Die Joomla! Installation bringt mittlerweile die .dev.svg Datei der Joomla! eigenen IcoMoon mit. Das hat große Vorteile, denn Sie brauchen nun nicht mehr eine eigene zusätzliche Schrift zu erstellen, sondern können die Joomla! eigene Schrift direkt um Zeichen erweitern, indem Sie zuerst, die Joomla! Schrift importieren, eigenen Icons hinzufügen und die erweiterte Schrift downloaden.

Dieser Vorgang ist unter "Eigene Schrift nachträglich verändern" weiter unten beschreiben.

Wenn Sie der Joomla!-eigenen IcoMoon zusätzliche Zeichen hinzufügen, sollten Sie die veränderte Schrift in einem Unterverzeichnis Ihres Templates speichern, damit sie bei Joomla! Updates nicht überschrieben wird.

Denken Sie daran den Pfad zum Fonts-Verzeichnis im @font-face Ihrer CSS-Datei anzupassen.

  • Hierzu klickt man einfach mit der Maus die Icons an, die man der Schrift hinzufügen will.
  • Über das Suchfeld ist es auch möglich gezielt nach bestimmten Icon-Typen zu suchen (z.B. Arrow, Facebook etc)
  • Nachdem man alle Icons ausgewählt hat klickt man auf den Button "Font" am Seitenende und kommt in ein Fenster, in dem man Einstellungen für die einzelnen Schriftzeichen und für die Schrift insgesamt vornehmen kann.
  • Für unsere Zwecke ist es ausreichend, Einstellungen für die Schrift insgesamt vorzunehmen. Hierzu klickt man auf den Punkt "Preferences" und vergibt dort unter "Font Name" einen eigenen Namen für die Schrift z.B. IcoMoonMyTemplate.
  • Damit die Schrift parallel zur IcoMoon des Joomla! 3 Frameworks verwendet werden kann ist es wichtig, unter "Class-Prefix" einen eigenen Präfix zu vergeben, der das Wort "icon" nicht enthält. Ich habe z.B. "social-" als "Class Prefix" gewählt, da meine Schrift-Auswahl Social-Media-Icons enthält.
  • Anschließend schließt man das Popup-Fenster und klickt auf den Button "Download" am Seitenende und speichert die Zip-Datei auf dem eigenen Rechner.

Eigene Schrift installieren und verwenden

Das schöne an der IcoMoon App ist, dass sie ein komplettes Schriftpaket erstellt, das neben der Schrift auch alle Informationen enthält, die man braucht umd die Schrift verwenden zu können. Man muss nur die Zip-Datei entpacken und das darin enthaltene Verzeichnis "fonts" ins eigene Template kopieren. Das entpackte Zip enthält auch eine Datei "style.css", die den gesamten css-Code enthält, den man benötigt, damit man die Schriftzeichen der IcoMoonMyTemplate verwenden kann. Den css-Code aus dieser Datei kopiert man einfach in die template.css-Datei des eigenen Templates und passt den Pfad zum fonts-Verzeichnis im css-Code an. Und schon kann man die Icon-Schriftzeichen mit Hilfe von span- oder i-Elementen, wie oben beschrieben, im Template verwenden.

Enthält das Zip eine Datei license.txt, so muss diese ins fonts-Verzeichnis kopiert werden. Wer Internet Explorer 7 oder 6 unterstützen will muss auch die im Zip enthaltene Datei lte-ie7.js mit Hilfe eines Conditional Comments ins Template einbinden.

Eigene Schrift nachträglich verändern

Die eigene Schrift kann nachträglich jederzeit wieder in die IcoMoon App geladen und erweitert (verändert) werden. Dies geschieht mit Hilfe der Datei mit der Endung .dev.svg, die im fonts-Verzeichnis liegt. Die Datei kann in der IcoMoon App mit Hilfe des Button "Import Icons" eingelesen werden. Überprüfen Sie die Einstellungen für die Schrift in den "Preferences", bevor Sie die geänderte Schrift downlaoden. Nach Änderungen muss natürlich auch das template.css wieder angepasst werden.

Zwischenzeitlich hat IcoMoon die App verändert. Die App ist weiterhin in der Lage .dev.svg Dateien zu importieren. Wenn Sie die Schrift dann aber wieder downloaden werden die Informationen über den Zeichensatz in einer Datei mit den Namen selection.json gespeichert.

Sie importieren also entweder die Datei selection.json oder die Datei mit der .dev.svg Endung.

Eigene Schrift optimieren

Um das Datenvolumen der Schrift möglichst gering und die Performance gut zu halten, sollten nur die Icons in die eigene Schrift übernommen werden, die man auch wirklich braucht.

IcoMoon für ältere Versionen Internet Explorer zum Laufen bringen

Ältere Versionen des Internet Explorer (Version 6 und 7) unterstützen zwar das Einbinden von Schriften über @font-face, nicht aber den :before Selector. Deshalb werden die Icons im ie6 und ie7 nicht angezeigt. Mithilfe von JavaScript-Code, der als eigene Datei im Schriftpaket enthalten ist, können die Icons aber auch im ie6 und ie7 zum Laufen gebracht werden.

Für die Joomla!-eigene IcoMoon

Wenn Sie nur die Joomla! eigene IcoMoon verwenden binden Sie die Datei icomoon-lte-ie7.js im media/jui/js-Verzeichnis mit folgendem Code (unter Verwednung eines Conidtional Comments) in Ihr Template ein:

<!--[if lt IE 8]>
    <script src="/<?php echo $this->baseurl ?>/media/jui/js/icomoon-lte-ie7.js"></script>
<![endif]-->
In der aktuellen Version von Joomla! 3.1.1 stable hat diese Datei noch einen kleinen Fehler. (Dieser ist im Joomla! Bug Tracker bereits gemeldet und wird sicher in zukünftigen Versionen behoben sein.) Öffen Sie die Datei in einem Editor, suche Sie folgenden Code:
c = c.match(/icon-[^s'"]+/);
und ersetzten ihn mit:
c = c.match(/icon-[^\s'"]+/);

Für die Joomla!-eigene IcoMoon, die Sie für Ihr Template um eine eigene Iconschrift erweitert haben

Wenn Sie zusätzlich zur Joomla!-eigenen IcoMoon eine eigene Schrift hinzugenommen haben müssen Sie die beiden JavaScript-Dateien für die beiden Schriften zusammenführen.

  • Kopieren Sie die Datei icomoon-lte-ie7.js aus dem media/jui/js-Verzeichnis in Ihr Template in ein Unterverzeichnis, das Sie js nennen.
  • Führen Sie die oben beschriebene Code-Korrektur für durch. (c = c.match(/icon-[^\s'"]+/);)
  • Suchen Sie im Schriftpaket, das Sie für Ihre Schrift heruntergeladen haben, die Datei lte-ie7.js und öffnen Sie diese in einem Editor
  • Nenne Sie die Funktion addIcon um (z.B. addSocialIcon). Die Funktion wird im Code zwei Mal aufgerufen, Sie müssen also insgesamt drei Mal den Text addIcon austauschen.
  • Nenne Sie die Variable Icons um (z.B. socialIcons). Die Variable wird im Code zwei Mal aufgerufen, Sie müssen also insgesamt drei Mal den Text Icons austauschen.
  • Kopieren Sie den Text
    function addSocialIcon(el, entity) { .... }
    incl. der schließenden geschweiften Klammer und fügen Sie Ihn in der Datei icomoon-lte-ie7.js direkt vor
    var icons = {
    ein.
  • Kopieren Sie in lte-ie7.js den Text von
    var socialIcons = {
    bis einschließlich der vorletzten Zeile. (}; in der letzten Zeile nicht mitkopieren!) und fügen Sie diesen Text in icomoon-lte-ie7.js zwischen der vorletzten und der letzten Zeile ein.
  • Binden Sie dann die Datei iconmoon-lte-ie7.js mit folgendem Code in die index.php Ihres Templates ein.
    <!--[if lt IE 8]>
        <script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/icomoon-lte-ie7.js"></script>
    <![endif]-->
    


Nun sollten beide Icon Fonts auch im ie6 und im ie7 funktionieren.

IcoMoon ist nur 1 Bestandteil der neuen jui-Funktionalität von Joomla! 3.0

IcoMoon ist ein Bestandteil der neuen jui-Funktionalitäten von Joomla! 3.0, die noch das Bootstrap.js von Twitter und die Verwendung von .less zur einfachen Erzeugung von CSS-Code (CSS-Preprozessor) umfasst. Gemeinsam bieten diese Funktionalitäten dem Webentwickler fantastische Möglichkeiten um ansprechende, moderne und responsive Templates für Joomla! 3 zu entwicklen, die auf allen Endgeräten optimal funktionieren.

Zur Beitragsliste