Aktuelle Icomoon-Font Übersicht CSS-Klassen Joomlas (Stand: Aktuell installiertes Joomla)

Joomla 3 bringt für Icons und Symbole eine kostenlose und angepasste Version des IcoMoon-Fonts mit. Das Protostar-Template hat sie z.B. in seiner template.css gebrauchsfertig drin. Man kann via CSS-Klassen Symbole anzeigen. In Joomla kommen immer wieder neue CSS-Klassen dazu, für paar Icons existieren sogar mehrere, die in der IcoMoon-Doku nicht zu finden sind, aber in diesem Beitrag.

Bild in größter Auflösung öffnen (Popup)

Hier eine Liste aller Klassen und Icons, die dynamisch aus der aktuellsten Datei icomoon.less ausgelesen wird.

(Siehe auch Glyphicons-Font (Bootstrap) Übersicht CSS-Klassen.)

Auf dieser Seite kann es sein, dass Bedienelemente (Navigations-Elemente etc.) "komisch" aussehen. Hat seinen Grund im unten ausgeführten Code, der auch CSS lädt, der nicht zur Seite passt.

Icomoon-CSS-Klassen, dynamisch aus icomoon.less ausgelesen

Gerenderte Ausgabe der Datei icomoonclasses.php

Datei /media/jui/less/icomoon.less nicht gefunden.ICOMOONCLASSES_APOLOGISE

Quelltext der Datei icomoonclasses.php

<?php
defined('_JEXEC') or die;
/**
2015-08-30
icomoonclasses.php
Siehe ReadMe.txt.
Liest aktuelle icomoon.less aus Joomla3-Core aus.
Gibt Beispiele für gefundene .icon-CSS-Klassen aus.
Gibt content-Eigenschaft dieser CSS-Klassen aus.
*/
$html = array();

$file = '/media/jui/less/icomoon.less';

// 2015-10: In BS3 und anderen muss explizit geladen werden
// und als <style>-Block ausgegeben.
$fileCss = '/media/jui/css/icomoon.css';

// 2016-07-16: JPATH_BASE-fix in backend.
$fileAbs = JPATH_SITE . $file;

// 2015-10
// 2016-07-16: JPATH_BASE-fix in backend.
$fileCssAbs = JPATH_SITE . $fileCss;

$apologise = JText::_('ICOMOONCLASSES_APOLOGISE');

$link = '';

if (!file_exists($fileAbs))
{
 $html[] = '<p class="alert alert-error">Datei ';
 $html[] = $file;
 $html[] = ' nicht gefunden.';
 $html[] = $apologise;
 $html[] = '</p>';
}
elseif (!file_exists($fileCssAbs))
{
 $html[] = '<p class="alert alert-error">Datei ';
 $html[] = $fileCss;
 $html[] = ' nicht gefunden.';
 $html[] = $apologise;
 $html[] = '</p>';
}
else
{
 
 // Fix. Don't use $html[] yet.
 $link = '<p><a href="' . JUri::root(true) . $file . '" target="_blank">' . $file . '</a></p>';
 $link .= '<p><a href="' . JUri::root(true) . $fileCss . '" target="_blank">' . $fileCss . '</a></p>';

 $fileContent = file_get_contents($fileAbs);
 
 $muster = '/(\.icon-[-a-z0-9]+:before(,.+?|))\s*{\s*content:\s*\"([^"]*)\"/s';
 
 $found = preg_match_all($muster, $fileContent, $matches, PREG_SET_ORDER);
 
 foreach ($matches as $key => &$match)
 {
  if (empty($match[1]) || empty($match[3]))
  {
   unset($matches[$key]);
   continue;
  }
  unset($match[0], $match[2]);
  
  $match[1] = str_replace(array(' ', ':before', "\n", "\r", '.'), '', $match[1]);
  $match[1] = explode(',', $match[1]);
 }
 unset($match);
 
 $nl = "\n";
 if (count($matches))
 {
  // $matches = array_values($matches);
  $html[] = '<ul class="list-group">' . $nl;
  foreach ($matches as $match)
  {
   $html[] = '<li class="list-group-item">';
   $html[] = '<p><strong>content: "' . $match[3] . '";' . '</strong></p>' . $nl;
   foreach ($match[1] as $cssClass)
   {
    $html[] = '<p>';
    $html[] = '<span class="' . $cssClass . ' large"></span><br />';
    $html[] = $cssClass . '<br />';
    $html[] = '<span class="code-inline">' . htmlentities('<span class="' . $cssClass . '"></span>') . '</span>';
    $html[] = '</p>' . $nl;
   }
   $html[] = '</li>' . $nl;
  }
  $html[] = '</ul>' . $nl;
 }
}
if (!count($html))
{
 $html[] = '<p class="alert alert-error">Da ist wohl was schief gelaufen. ';
 $html[] = $apologise;
 $html[] = '</p>';
}
else
{
 // 2015-10: icommon.css auslesen und in <style>-Block ausgeben
 $fileContent = file_get_contents($fileCssAbs);
 // Webfont-Pfade korrigieren
 $fileContent = str_replace(
  '../fonts/IcoMoon.',
  JUri::root() . 'media/jui/fonts/IcoMoon.',
  $fileContent
 );
 //Override my custom BS3-Less
 $extra = '[class^="icon-"], [class*=" icon-"] {font-family:inherit !important;}';
 echo '<style>' . $extra . $fileContent . '</style>';
 
 //Gnaaaaah! Da sich leider zeigte, dass icomoon.css NICHT aktuell ist
 // und einige Icons nicht angezeigt werden,
 // lade ich halt noch LESS nach, das derzeit reines CSS ist.
 $fileContent = file_get_contents($fileAbs);
 echo '<style>' . $fileContent . '</style>';
 //Todo: Overhead vermeiden mit icomoon.css, was ich dann NUR noch für @font-face
 // brauche, dass im LESS widerum fehlt.
}

echo $link . implode('', $html);