Joomla 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.

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

/media/jui/less/icomoon.less

/media/jui/css/icomoon.css

  • content: "\e200";


    icon-joomla
    <span class="icon-joomla"></span>

  • content: "\e005";


    icon-chevron-up
    <span class="icon-chevron-up"></span>


    icon-uparrow
    <span class="icon-uparrow"></span>


    icon-arrow-up
    <span class="icon-arrow-up"></span>

  • content: "\e006";


    icon-chevron-right
    <span class="icon-chevron-right"></span>


    icon-rightarrow
    <span class="icon-rightarrow"></span>


    icon-arrow-right
    <span class="icon-arrow-right"></span>

  • content: "\e007";


    icon-chevron-down
    <span class="icon-chevron-down"></span>


    icon-downarrow
    <span class="icon-downarrow"></span>


    icon-arrow-down
    <span class="icon-arrow-down"></span>

  • content: "\e008";


    icon-chevron-left
    <span class="icon-chevron-left"></span>


    icon-leftarrow
    <span class="icon-leftarrow"></span>


    icon-arrow-left
    <span class="icon-arrow-left"></span>

  • content: "\e003";


    icon-arrow-first
    <span class="icon-arrow-first"></span>

  • content: "\e004";


    icon-arrow-last
    <span class="icon-arrow-last"></span>

  • content: "\e009";


    icon-arrow-up-2
    <span class="icon-arrow-up-2"></span>

  • content: "\e00a";


    icon-arrow-right-2
    <span class="icon-arrow-right-2"></span>

  • content: "\e00b";


    icon-arrow-down-2
    <span class="icon-arrow-down-2"></span>

  • content: "\e00c";


    icon-arrow-left-2
    <span class="icon-arrow-left-2"></span>

  • content: "\e00f";


    icon-arrow-up-3
    <span class="icon-arrow-up-3"></span>

  • content: "\e010";


    icon-arrow-right-3
    <span class="icon-arrow-right-3"></span>

  • content: "\e011";


    icon-arrow-down-3
    <span class="icon-arrow-down-3"></span>

  • content: "\e012";


    icon-arrow-left-3
    <span class="icon-arrow-left-3"></span>

  • content: "\e00e";


    icon-menu-2
    <span class="icon-menu-2"></span>

  • content: "\e201";


    icon-arrow-up-4
    <span class="icon-arrow-up-4"></span>

  • content: "\e202";


    icon-arrow-right-4
    <span class="icon-arrow-right-4"></span>

  • content: "\e203";


    icon-arrow-down-4
    <span class="icon-arrow-down-4"></span>

  • content: "\e204";


    icon-arrow-left-4
    <span class="icon-arrow-left-4"></span>

  • content: "\27";


    icon-share
    <span class="icon-share"></span>


    icon-redo
    <span class="icon-redo"></span>

  • content: "\28";


    icon-undo
    <span class="icon-undo"></span>

  • content: "\e205";


    icon-forward-2
    <span class="icon-forward-2"></span>

  • content: "\e206";


    icon-backward-2
    <span class="icon-backward-2"></span>


    icon-reply
    <span class="icon-reply"></span>

  • content: "\6c";


    icon-unblock
    <span class="icon-unblock"></span>


    icon-refresh
    <span class="icon-refresh"></span>


    icon-redo-2
    <span class="icon-redo-2"></span>

  • content: "\e207";


    icon-undo-2
    <span class="icon-undo-2"></span>

  • content: "\7a";


    icon-move
    <span class="icon-move"></span>

  • content: "\66";


    icon-expand
    <span class="icon-expand"></span>

  • content: "\67";


    icon-contract
    <span class="icon-contract"></span>

  • content: "\68";


    icon-expand-2
    <span class="icon-expand-2"></span>

  • content: "\69";


    icon-contract-2
    <span class="icon-contract-2"></span>

  • content: "\e208";


    icon-play
    <span class="icon-play"></span>

  • content: "\e209";


    icon-pause
    <span class="icon-pause"></span>

  • content: "\e210";


    icon-stop
    <span class="icon-stop"></span>

  • content: "\7c";


    icon-previous
    <span class="icon-previous"></span>


    icon-backward
    <span class="icon-backward"></span>

  • content: "\7b";


    icon-next
    <span class="icon-next"></span>


    icon-forward
    <span class="icon-forward"></span>

  • content: "\7d";


    icon-first
    <span class="icon-first"></span>

  • content: "\e000";


    icon-last
    <span class="icon-last"></span>

  • content: "\e00d";


    icon-play-circle
    <span class="icon-play-circle"></span>

  • content: "\e211";


    icon-pause-circle
    <span class="icon-pause-circle"></span>

  • content: "\e212";


    icon-stop-circle
    <span class="icon-stop-circle"></span>

  • content: "\e213";


    icon-backward-circle
    <span class="icon-backward-circle"></span>

  • content: "\e214";


    icon-forward-circle
    <span class="icon-forward-circle"></span>

  • content: "\e001";


    icon-loop
    <span class="icon-loop"></span>

  • content: "\e002";


    icon-shuffle
    <span class="icon-shuffle"></span>

  • content: "\53";


    icon-search
    <span class="icon-search"></span>

  • content: "\64";


    icon-zoom-in
    <span class="icon-zoom-in"></span>

  • content: "\65";


    icon-zoom-out
    <span class="icon-zoom-out"></span>

  • content: "\2b";


    icon-apply
    <span class="icon-apply"></span>


    icon-edit
    <span class="icon-edit"></span>


    icon-pencil
    <span class="icon-pencil"></span>

  • content: "\2c";


    icon-pencil-2
    <span class="icon-pencil-2"></span>

  • content: "\3b";


    icon-brush
    <span class="icon-brush"></span>

  • content: "\5d";


    icon-save-new
    <span class="icon-save-new"></span>


    icon-plus-2
    <span class="icon-plus-2"></span>

  • content: "\5e";


    icon-minus-sign
    <span class="icon-minus-sign"></span>


    icon-minus-2
    <span class="icon-minus-2"></span>

  • content: "\49";


    icon-delete
    <span class="icon-delete"></span>


    icon-remove
    <span class="icon-remove"></span>


    icon-cancel-2
    <span class="icon-cancel-2"></span>

  • content: "\47";


    icon-publish
    <span class="icon-publish"></span>


    icon-save
    <span class="icon-save"></span>


    icon-ok
    <span class="icon-ok"></span>


    icon-checkmark
    <span class="icon-checkmark"></span>

  • content: "\2a";


    icon-new
    <span class="icon-new"></span>


    icon-plus
    <span class="icon-plus"></span>

  • content: "\e215";


    icon-plus-circle
    <span class="icon-plus-circle"></span>

  • content: "\4b";


    icon-minus
    <span class="icon-minus"></span>


    icon-not-ok
    <span class="icon-not-ok"></span>

  • content: "\e216";


    icon-ban-circle
    <span class="icon-ban-circle"></span>


    icon-minus-circle
    <span class="icon-minus-circle"></span>

  • content: "\4a";


    icon-unpublish
    <span class="icon-unpublish"></span>


    icon-cancel
    <span class="icon-cancel"></span>

  • content: "\e217";


    icon-cancel-circle
    <span class="icon-cancel-circle"></span>

  • content: "\e218";


    icon-checkmark-2
    <span class="icon-checkmark-2"></span>

  • content: "\e219";


    icon-checkmark-circle
    <span class="icon-checkmark-circle"></span>

  • content: "\e220";


    icon-info
    <span class="icon-info"></span>

  • content: "\e221";


    icon-info-2
    <span class="icon-info-2"></span>


    icon-info-circle
    <span class="icon-info-circle"></span>

  • content: "\45";


    icon-question
    <span class="icon-question"></span>


    icon-question-sign
    <span class="icon-question-sign"></span>


    icon-help
    <span class="icon-help"></span>

  • content: "\e222";


    icon-question-2
    <span class="icon-question-2"></span>


    icon-question-circle
    <span class="icon-question-circle"></span>

  • content: "\e223";


    icon-notification
    <span class="icon-notification"></span>

  • content: "\e224";


    icon-notification-2
    <span class="icon-notification-2"></span>


    icon-notification-circle
    <span class="icon-notification-circle"></span>

  • content: "\48";


    icon-pending
    <span class="icon-pending"></span>


    icon-warning
    <span class="icon-warning"></span>

  • content: "\e225";


    icon-warning-2
    <span class="icon-warning-2"></span>


    icon-warning-circle
    <span class="icon-warning-circle"></span>

  • content: "\3d";


    icon-checkbox-unchecked
    <span class="icon-checkbox-unchecked"></span>

  • content: "\3e";


    icon-checkin
    <span class="icon-checkin"></span>


    icon-checkbox
    <span class="icon-checkbox"></span>


    icon-checkbox-checked
    <span class="icon-checkbox-checked"></span>

  • content: "\3f";


    icon-checkbox-partial
    <span class="icon-checkbox-partial"></span>

  • content: "\e226";


    icon-square
    <span class="icon-square"></span>

  • content: "\e227";


    icon-radio-unchecked
    <span class="icon-radio-unchecked"></span>

  • content: "\e228";


    icon-radio-checked
    <span class="icon-radio-checked"></span>


    icon-generic
    <span class="icon-generic"></span>

  • content: "\e229";


    icon-circle
    <span class="icon-circle"></span>

  • content: "\e230";


    icon-signup
    <span class="icon-signup"></span>

  • content: "\58";


    icon-grid
    <span class="icon-grid"></span>


    icon-grid-view
    <span class="icon-grid-view"></span>

  • content: "\59";


    icon-grid-2
    <span class="icon-grid-2"></span>


    icon-grid-view-2
    <span class="icon-grid-view-2"></span>

  • content: "\5a";


    icon-menu
    <span class="icon-menu"></span>

  • content: "\31";


    icon-list
    <span class="icon-list"></span>


    icon-list-view
    <span class="icon-list-view"></span>

  • content: "\e231";


    icon-list-2
    <span class="icon-list-2"></span>

  • content: "\e232";


    icon-menu-3
    <span class="icon-menu-3"></span>

  • content: "\2d";


    icon-folder-open
    <span class="icon-folder-open"></span>


    icon-folder
    <span class="icon-folder"></span>

  • content: "\2e";


    icon-folder-close
    <span class="icon-folder-close"></span>


    icon-folder-2
    <span class="icon-folder-2"></span>

  • content: "\e234";


    icon-folder-plus
    <span class="icon-folder-plus"></span>

  • content: "\e235";


    icon-folder-minus
    <span class="icon-folder-minus"></span>

  • content: "\e236";


    icon-folder-3
    <span class="icon-folder-3"></span>

  • content: "\e237";


    icon-folder-plus-2
    <span class="icon-folder-plus-2"></span>

  • content: "\e238";


    icon-folder-remove
    <span class="icon-folder-remove"></span>

  • content: "\e016";


    icon-file
    <span class="icon-file"></span>

  • content: "\e239";


    icon-file-2
    <span class="icon-file-2"></span>

  • content: "\29";


    icon-file-add
    <span class="icon-file-add"></span>


    icon-file-plus
    <span class="icon-file-plus"></span>

  • content: "\e017";


    icon-file-minus
    <span class="icon-file-minus"></span>

  • content: "\e240";


    icon-file-check
    <span class="icon-file-check"></span>

  • content: "\e241";


    icon-file-remove
    <span class="icon-file-remove"></span>

  • content: "\e018";


    icon-save-copy
    <span class="icon-save-copy"></span>


    icon-copy
    <span class="icon-copy"></span>

  • content: "\e242";


    icon-stack
    <span class="icon-stack"></span>

  • content: "\e243";


    icon-tree
    <span class="icon-tree"></span>

  • content: "\e244";


    icon-tree-2
    <span class="icon-tree-2"></span>

  • content: "\e246";


    icon-paragraph-left
    <span class="icon-paragraph-left"></span>

  • content: "\e247";


    icon-paragraph-center
    <span class="icon-paragraph-center"></span>

  • content: "\e248";


    icon-paragraph-right
    <span class="icon-paragraph-right"></span>

  • content: "\e249";


    icon-paragraph-justify
    <span class="icon-paragraph-justify"></span>

  • content: "\e01c";


    icon-screen
    <span class="icon-screen"></span>

  • content: "\e01d";


    icon-tablet
    <span class="icon-tablet"></span>

  • content: "\e01e";


    icon-mobile
    <span class="icon-mobile"></span>

  • content: "\51";


    icon-box-add
    <span class="icon-box-add"></span>

  • content: "\52";


    icon-box-remove
    <span class="icon-box-remove"></span>

  • content: "\e021";


    icon-download
    <span class="icon-download"></span>

  • content: "\e022";


    icon-upload
    <span class="icon-upload"></span>

  • content: "\21";


    icon-home
    <span class="icon-home"></span>

  • content: "\e250";


    icon-home-2
    <span class="icon-home-2"></span>

  • content: "\e024";


    icon-out-2
    <span class="icon-out-2"></span>


    icon-new-tab
    <span class="icon-new-tab"></span>

  • content: "\e251";


    icon-out-3
    <span class="icon-out-3"></span>


    icon-new-tab-2
    <span class="icon-new-tab-2"></span>

  • content: "\e252";


    icon-link
    <span class="icon-link"></span>

  • content: "\2f";


    icon-picture
    <span class="icon-picture"></span>


    icon-image
    <span class="icon-image"></span>

  • content: "\30";


    icon-pictures
    <span class="icon-pictures"></span>


    icon-images
    <span class="icon-images"></span>

  • content: "\e014";


    icon-palette
    <span class="icon-palette"></span>


    icon-color-palette
    <span class="icon-color-palette"></span>

  • content: "\55";


    icon-camera
    <span class="icon-camera"></span>

  • content: "\e015";


    icon-camera-2
    <span class="icon-camera-2"></span>


    icon-video
    <span class="icon-video"></span>

  • content: "\56";


    icon-play-2
    <span class="icon-play-2"></span>


    icon-video-2
    <span class="icon-video-2"></span>


    icon-youtube
    <span class="icon-youtube"></span>

  • content: "\57";


    icon-music
    <span class="icon-music"></span>

  • content: "\22";


    icon-user
    <span class="icon-user"></span>

  • content: "\e01f";


    icon-users
    <span class="icon-users"></span>

  • content: "\6d";


    icon-vcard
    <span class="icon-vcard"></span>

  • content: "\70";


    icon-address
    <span class="icon-address"></span>

  • content: "\26";


    icon-share-alt
    <span class="icon-share-alt"></span>


    icon-out
    <span class="icon-out"></span>

  • content: "\e257";


    icon-enter
    <span class="icon-enter"></span>

  • content: "\e258";


    icon-exit
    <span class="icon-exit"></span>

  • content: "\24";


    icon-comment
    <span class="icon-comment"></span>


    icon-comments
    <span class="icon-comments"></span>

  • content: "\25";


    icon-comments-2
    <span class="icon-comments-2"></span>

  • content: "\60";


    icon-quote
    <span class="icon-quote"></span>


    icon-quotes-left
    <span class="icon-quotes-left"></span>

  • content: "\61";


    icon-quote-2
    <span class="icon-quote-2"></span>


    icon-quotes-right
    <span class="icon-quotes-right"></span>

  • content: "\e259";


    icon-quote-3
    <span class="icon-quote-3"></span>


    icon-bubble-quote
    <span class="icon-bubble-quote"></span>

  • content: "\e260";


    icon-phone
    <span class="icon-phone"></span>

  • content: "\e261";


    icon-phone-2
    <span class="icon-phone-2"></span>

  • content: "\4d";


    icon-envelope
    <span class="icon-envelope"></span>


    icon-mail
    <span class="icon-mail"></span>

  • content: "\4e";


    icon-envelope-opened
    <span class="icon-envelope-opened"></span>


    icon-mail-2
    <span class="icon-mail-2"></span>

  • content: "\4f";


    icon-unarchive
    <span class="icon-unarchive"></span>


    icon-drawer
    <span class="icon-drawer"></span>

  • content: "\50";


    icon-archive
    <span class="icon-archive"></span>


    icon-drawer-2
    <span class="icon-drawer-2"></span>

  • content: "\e020";


    icon-briefcase
    <span class="icon-briefcase"></span>

  • content: "\e262";


    icon-tag
    <span class="icon-tag"></span>

  • content: "\e263";


    icon-tag-2
    <span class="icon-tag-2"></span>

  • content: "\e264";


    icon-tags
    <span class="icon-tags"></span>

  • content: "\e265";


    icon-tags-2
    <span class="icon-tags-2"></span>

  • content: "\38";


    icon-options
    <span class="icon-options"></span>


    icon-cog
    <span class="icon-cog"></span>

  • content: "\37";


    icon-cogs
    <span class="icon-cogs"></span>

  • content: "\36";


    icon-screwdriver
    <span class="icon-screwdriver"></span>


    icon-tools
    <span class="icon-tools"></span>

  • content: "\3a";


    icon-wrench
    <span class="icon-wrench"></span>

  • content: "\39";


    icon-equalizer
    <span class="icon-equalizer"></span>

  • content: "\78";


    icon-dashboard
    <span class="icon-dashboard"></span>

  • content: "\e266";


    icon-switch
    <span class="icon-switch"></span>

  • content: "\54";


    icon-filter
    <span class="icon-filter"></span>

  • content: "\4c";


    icon-purge
    <span class="icon-purge"></span>


    icon-trash
    <span class="icon-trash"></span>

  • content: "\23";


    icon-checkedout
    <span class="icon-checkedout"></span>


    icon-lock
    <span class="icon-lock"></span>


    icon-locked
    <span class="icon-locked"></span>

  • content: "\e267";


    icon-unlock
    <span class="icon-unlock"></span>

  • content: "\5f";


    icon-key
    <span class="icon-key"></span>

  • content: "\46";


    icon-support
    <span class="icon-support"></span>

  • content: "\62";


    icon-database
    <span class="icon-database"></span>

  • content: "\e268";


    icon-scissors
    <span class="icon-scissors"></span>

  • content: "\6a";


    icon-health
    <span class="icon-health"></span>

  • content: "\6b";


    icon-wand
    <span class="icon-wand"></span>

  • content: "\3c";


    icon-eye-open
    <span class="icon-eye-open"></span>


    icon-eye
    <span class="icon-eye"></span>

  • content: "\e269";


    icon-eye-close
    <span class="icon-eye-close"></span>


    icon-eye-blocked
    <span class="icon-eye-blocked"></span>


    icon-eye-2
    <span class="icon-eye-2"></span>

  • content: "\6e";


    icon-clock
    <span class="icon-clock"></span>

  • content: "\6f";


    icon-compass
    <span class="icon-compass"></span>

  • content: "\e01b";


    icon-broadcast
    <span class="icon-broadcast"></span>


    icon-connection
    <span class="icon-connection"></span>


    icon-wifi
    <span class="icon-wifi"></span>

  • content: "\e271";


    icon-book
    <span class="icon-book"></span>

  • content: "\79";


    icon-lightning
    <span class="icon-lightning"></span>


    icon-flash
    <span class="icon-flash"></span>

  • content: "\e013";


    icon-print
    <span class="icon-print"></span>


    icon-printer
    <span class="icon-printer"></span>

  • content: "\71";


    icon-feed
    <span class="icon-feed"></span>

  • content: "\43";


    icon-calendar
    <span class="icon-calendar"></span>

  • content: "\44";


    icon-calendar-2
    <span class="icon-calendar-2"></span>

  • content: "\e273";


    icon-calendar-3
    <span class="icon-calendar-3"></span>

  • content: "\77";


    icon-pie
    <span class="icon-pie"></span>

  • content: "\76";


    icon-bars
    <span class="icon-bars"></span>

  • content: "\75";


    icon-chart
    <span class="icon-chart"></span>

  • content: "\32";


    icon-power-cord
    <span class="icon-power-cord"></span>

  • content: "\33";


    icon-cube
    <span class="icon-cube"></span>

  • content: "\34";


    icon-puzzle
    <span class="icon-puzzle"></span>

  • content: "\72";


    icon-attachment
    <span class="icon-attachment"></span>


    icon-paperclip
    <span class="icon-paperclip"></span>


    icon-flag-2
    <span class="icon-flag-2"></span>

  • content: "\74";


    icon-lamp
    <span class="icon-lamp"></span>

  • content: "\73";


    icon-pin
    <span class="icon-pin"></span>


    icon-pushpin
    <span class="icon-pushpin"></span>

  • content: "\63";


    icon-location
    <span class="icon-location"></span>

  • content: "\e274";


    icon-shield
    <span class="icon-shield"></span>

  • content: "\35";


    icon-flag
    <span class="icon-flag"></span>

  • content: "\e275";


    icon-flag-3
    <span class="icon-flag-3"></span>

  • content: "\e023";


    icon-bookmark
    <span class="icon-bookmark"></span>

  • content: "\e276";


    icon-bookmark-2
    <span class="icon-bookmark-2"></span>

  • content: "\e277";


    icon-heart
    <span class="icon-heart"></span>

  • content: "\e278";


    icon-heart-2
    <span class="icon-heart-2"></span>

  • content: "\5b";


    icon-thumbs-up
    <span class="icon-thumbs-up"></span>

  • content: "\5c";


    icon-thumbs-down
    <span class="icon-thumbs-down"></span>

  • content: "\40";


    icon-unfeatured
    <span class="icon-unfeatured"></span>


    icon-asterisk
    <span class="icon-asterisk"></span>


    icon-star-empty
    <span class="icon-star-empty"></span>

  • content: "\41";


    icon-star-2
    <span class="icon-star-2"></span>

  • content: "\42";


    icon-featured
    <span class="icon-featured"></span>


    icon-default
    <span class="icon-default"></span>


    icon-star
    <span class="icon-star"></span>

  • content: "\e279";


    icon-smiley
    <span class="icon-smiley"></span>


    icon-smiley-happy
    <span class="icon-smiley-happy"></span>

  • content: "\e280";


    icon-smiley-2
    <span class="icon-smiley-2"></span>


    icon-smiley-happy-2
    <span class="icon-smiley-happy-2"></span>

  • content: "\e281";


    icon-smiley-sad
    <span class="icon-smiley-sad"></span>

  • content: "\e282";


    icon-smiley-sad-2
    <span class="icon-smiley-sad-2"></span>

  • content: "\e283";


    icon-smiley-neutral
    <span class="icon-smiley-neutral"></span>

  • content: "\e284";


    icon-smiley-neutral-2
    <span class="icon-smiley-neutral-2"></span>

  • content: "\e019";


    icon-cart
    <span class="icon-cart"></span>

  • content: "\e01a";


    icon-basket
    <span class="icon-basket"></span>

  • content: "\e286";


    icon-credit
    <span class="icon-credit"></span>

  • content: "\e287";


    icon-credit-2
    <span class="icon-credit-2"></span>

  • content: "\4b";


    icon-expired
    <span class="icon-expired"></span>

<?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);

Allgemeiner Hinweis zu Erweiterungen und Code-Schnipseln

Verbesserungsvorschläge, Fragen und Feature-Wünsche sind willkommen.

Alle nicht explizit als fertige Erweiterung markierten Skripte und Codes von www.ghsvs.de dienen als Ansätze / Ideen für eigene Ausarbeitung. GHSVS bzw. die jeweiligen Autoren übernehmen keinerlei Garantien beim Einsatz Ihrer kostenlosen Erweiterungen, Programme, Codes und Skripte, helfen aber gerne bei Rückfragen, soweit zeitlich möglich.