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

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.

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.

Obwohl IcoMoon sehr gute Arbeit leistet, können Sie damit leider nur Favicons aus Bildern erstellen, die bis zu 2 MB groß sind.
Mit dem Tool Favicon Generator von Websiteplanet, können Sie Favicons aus Bildern erstellen, die bis zu 5 MB groß sind. Als Eingabe werden die Formate JPG, PNG und GIF unterstützt. Bild-Eingaben aus einer eigenen Galerie der Webseite sind ebenfalls möglich.

Eigene Schrift zusammenstellen

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.

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