Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

JoomlaSchnipsel

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

Verbesserungsvorschläge 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.

Joomla CSS LESS Font