Glyphicons-Font (Bootstrap) Übersicht CSS-Klassen

Da Bootstrap 4 von Glyphicons nichts mehr wissen will, gar keinen Web-Font mehr mitbringt, und mittlerweile mit SASS arbeitet statt LESS und Bootstrap 3 sicherlich auch bald das "Zeitliche segnen" wird, obwohl durchaus noch in Gebrauch, ist diese Übersicht nur noch für "Historiker" online.

Natürlich funktionieren die Klassen noch und der Glyphicons-Font. Man muss ihn ja nicht unbedingt zusammen mit Bootstrap verwenden.

Bootstrap-3-Downloads (dist-Pakete) haben den Font dabei und auch die Less-Datei glyphicons.less, die man auch alleine kompilieren kann (keine Abhängigkeiten).

Kein Bock auf LESS? Glyphicons in Joomla installieren

- Lade oben verlinktes bootstrap-3.4.1-dist.zip herunter.

- Entpacke das ZIP-Archiv auf deinem Rechner und kopiere den Ordner /fonts/ inklusive Inhalt (fünf Dateien) in den Haupt-Ordner deines Templates. Wenn du schon einen Ordner /fonts/ drinnen hast, dann halt nur den Inhalt kopieren.

- Lade dir die unten verlinkte CSS-Datei glyphicons.css herunter und lege sie im /css/-Ordner deines Templates ab.

- Füge in die index.php deines Templates diesen PHP-Code ein, um das Stylesheet in's Template zu laden:

\Joomla\CMS\HTML\HTMLHelper::_('stylesheet',
	'glyphicons.css',
	array('version' => 'auto', 'relative' => true)
);

Wie in Joomla üblich, kann man die Zeilen natürlich auch in anderen Erweiterungen verwenden. Hauptsache sie stehen in einem Bereich, der mit <?php "eröffnet" wurde.

Glyphicon-CSS-Klassen, dynamisch aus glyphicons.less ausgelesen

Gerenderte Ausgabe der Datei glyphiconsclasses.php

/media/plg_system_bs3ghsvs/glyphicons/glyphicons.less

/media/plg_system_bs3ghsvs/glyphicons/glyphicons.css

content: "\002a";

glyphicon-asterisk

content: "\002b";

glyphicon-plus

content: "\20ac";

glyphicon-euro


glyphicon-eur

content: "\2212";

glyphicon-minus

content: "\2601";

glyphicon-cloud

content: "\2709";

glyphicon-envelope

content: "\270f";

glyphicon-pencil

content: "\e001";

glyphicon-glass

content: "\e002";

glyphicon-music

content: "\e003";

glyphicon-search

content: "\e005";

glyphicon-heart

content: "\e006";

glyphicon-star

content: "\e007";

glyphicon-star-empty

content: "\e008";

glyphicon-user

content: "\e009";

glyphicon-film

content: "\e010";

glyphicon-th-large

content: "\e011";

glyphicon-th

content: "\e012";

glyphicon-th-list

content: "\e013";

glyphicon-ok

content: "\e014";

glyphicon-remove

content: "\e015";

glyphicon-zoom-in

content: "\e016";

glyphicon-zoom-out

content: "\e017";

glyphicon-off

content: "\e018";

glyphicon-signal

content: "\e019";

glyphicon-cog

content: "\e020";

glyphicon-trash

content: "\e021";

glyphicon-home

content: "\e022";

glyphicon-file

content: "\e023";

glyphicon-time

content: "\e024";

glyphicon-road

content: "\e025";

glyphicon-download-alt

content: "\e026";

glyphicon-download

content: "\e027";

glyphicon-upload

content: "\e028";

glyphicon-inbox

content: "\e029";

glyphicon-play-circle

content: "\e030";

glyphicon-repeat

content: "\e031";

glyphicon-refresh

content: "\e032";

glyphicon-list-alt

content: "\e033";

glyphicon-lock

content: "\e034";

glyphicon-flag

content: "\e035";

glyphicon-headphones

content: "\e036";

glyphicon-volume-off

content: "\e037";

glyphicon-volume-down

content: "\e038";

glyphicon-volume-up

content: "\e039";

glyphicon-qrcode

content: "\e040";

glyphicon-barcode

content: "\e041";

glyphicon-tag

content: "\e042";

glyphicon-tags

content: "\e043";

glyphicon-book

content: "\e044";

glyphicon-bookmark

content: "\e045";

glyphicon-print

content: "\e046";

glyphicon-camera

content: "\e047";

glyphicon-font

content: "\e048";

glyphicon-bold

content: "\e049";

glyphicon-italic

content: "\e050";

glyphicon-text-height

content: "\e051";

glyphicon-text-width

content: "\e052";

glyphicon-align-left

content: "\e053";

glyphicon-align-center

content: "\e054";

glyphicon-align-right

content: "\e055";

glyphicon-align-justify

content: "\e056";

glyphicon-list

content: "\e057";

glyphicon-indent-left

content: "\e058";

glyphicon-indent-right

content: "\e059";

glyphicon-facetime-video

content: "\e060";

glyphicon-picture

content: "\e062";

glyphicon-map-marker

content: "\e063";

glyphicon-adjust

content: "\e064";

glyphicon-tint

content: "\e065";

glyphicon-edit

content: "\e066";

glyphicon-share

content: "\e067";

glyphicon-check

content: "\e068";

glyphicon-move

content: "\e069";

glyphicon-step-backward

content: "\e070";

glyphicon-fast-backward

content: "\e071";

glyphicon-backward

content: "\e072";

glyphicon-play

content: "\e073";

glyphicon-pause

content: "\e074";

glyphicon-stop

content: "\e075";

glyphicon-forward

content: "\e076";

glyphicon-fast-forward

content: "\e077";

glyphicon-step-forward

content: "\e078";

glyphicon-eject

content: "\e079";

glyphicon-chevron-left

content: "\e080";

glyphicon-chevron-right

content: "\e081";

glyphicon-plus-sign

content: "\e082";

glyphicon-minus-sign

content: "\e083";

glyphicon-remove-sign

content: "\e084";

glyphicon-ok-sign

content: "\e085";

glyphicon-question-sign

content: "\e086";

glyphicon-info-sign

content: "\e087";

glyphicon-screenshot

content: "\e088";

glyphicon-remove-circle

content: "\e089";

glyphicon-ok-circle

content: "\e090";

glyphicon-ban-circle

content: "\e091";

glyphicon-arrow-left

content: "\e092";

glyphicon-arrow-right

content: "\e093";

glyphicon-arrow-up

content: "\e094";

glyphicon-arrow-down

content: "\e095";

glyphicon-share-alt

content: "\e096";

glyphicon-resize-full

content: "\e097";

glyphicon-resize-small

content: "\e101";

glyphicon-exclamation-sign

content: "\e102";

glyphicon-gift

content: "\e103";

glyphicon-leaf

content: "\e104";

glyphicon-fire

content: "\e105";

glyphicon-eye-open

content: "\e106";

glyphicon-eye-close

content: "\e107";

glyphicon-warning-sign

content: "\e108";

glyphicon-plane

content: "\e109";

glyphicon-calendar

content: "\e110";

glyphicon-random

content: "\e111";

glyphicon-comment

content: "\e112";

glyphicon-magnet

content: "\e113";

glyphicon-chevron-up

content: "\e114";

glyphicon-chevron-down

content: "\e115";

glyphicon-retweet

content: "\e116";

glyphicon-shopping-cart

content: "\e117";

glyphicon-folder-close

content: "\e118";

glyphicon-folder-open

content: "\e119";

glyphicon-resize-vertical

content: "\e120";

glyphicon-resize-horizontal

content: "\e121";

glyphicon-hdd

content: "\e122";

glyphicon-bullhorn

content: "\e123";

glyphicon-bell

content: "\e124";

glyphicon-certificate

content: "\e125";

glyphicon-thumbs-up

content: "\e126";

glyphicon-thumbs-down

content: "\e127";

glyphicon-hand-right

content: "\e128";

glyphicon-hand-left

content: "\e129";

glyphicon-hand-up

content: "\e130";

glyphicon-hand-down

content: "\e131";

glyphicon-circle-arrow-right

content: "\e132";

glyphicon-circle-arrow-left

content: "\e133";

glyphicon-circle-arrow-up

content: "\e134";

glyphicon-circle-arrow-down

content: "\e135";

glyphicon-globe

content: "\e136";

glyphicon-wrench

content: "\e137";

glyphicon-tasks

content: "\e138";

glyphicon-filter

content: "\e139";

glyphicon-briefcase

content: "\e140";

glyphicon-fullscreen

content: "\e141";

glyphicon-dashboard

content: "\e142";

glyphicon-paperclip

content: "\e143";

glyphicon-heart-empty

content: "\e144";

glyphicon-link

content: "\e145";

glyphicon-phone

content: "\e146";

glyphicon-pushpin

content: "\e148";

glyphicon-usd

content: "\e149";

glyphicon-gbp

content: "\e150";

glyphicon-sort

content: "\e151";

glyphicon-sort-by-alphabet

content: "\e152";

glyphicon-sort-by-alphabet-alt

content: "\e153";

glyphicon-sort-by-order

content: "\e154";

glyphicon-sort-by-order-alt

content: "\e155";

glyphicon-sort-by-attributes

content: "\e156";

glyphicon-sort-by-attributes-alt

content: "\e157";

glyphicon-unchecked

content: "\e158";

glyphicon-expand

content: "\e159";

glyphicon-collapse-down

content: "\e160";

glyphicon-collapse-up

content: "\e161";

glyphicon-log-in

content: "\e162";

glyphicon-flash

content: "\e163";

glyphicon-log-out

content: "\e164";

glyphicon-new-window

content: "\e165";

glyphicon-record

content: "\e166";

glyphicon-save

content: "\e167";

glyphicon-open

content: "\e168";

glyphicon-saved

content: "\e169";

glyphicon-import

content: "\e170";

glyphicon-export

content: "\e171";

glyphicon-send

content: "\e172";

glyphicon-floppy-disk

content: "\e173";

glyphicon-floppy-saved

content: "\e174";

glyphicon-floppy-remove

content: "\e175";

glyphicon-floppy-save

content: "\e176";

glyphicon-floppy-open

content: "\e177";

glyphicon-credit-card

content: "\e178";

glyphicon-transfer

content: "\e179";

glyphicon-cutlery

content: "\e180";

glyphicon-header

content: "\e181";

glyphicon-compressed

content: "\e182";

glyphicon-earphone

content: "\e183";

glyphicon-phone-alt

content: "\e184";

glyphicon-tower

content: "\e185";

glyphicon-stats

content: "\e186";

glyphicon-sd-video

content: "\e187";

glyphicon-hd-video

content: "\e188";

glyphicon-subtitles

content: "\e189";

glyphicon-sound-stereo

content: "\e190";

glyphicon-sound-dolby

content: "\e191";

glyphicon-sound-5-1

content: "\e192";

glyphicon-sound-6-1

content: "\e193";

glyphicon-sound-7-1

content: "\e194";

glyphicon-copyright-mark

content: "\e195";

glyphicon-registration-mark

content: "\e197";

glyphicon-cloud-download

content: "\e198";

glyphicon-cloud-upload

content: "\e199";

glyphicon-tree-conifer

content: "\e200";

glyphicon-tree-deciduous

content: "\e201";

glyphicon-cd

content: "\e202";

glyphicon-save-file

content: "\e203";

glyphicon-open-file

content: "\e204";

glyphicon-level-up

content: "\e205";

glyphicon-copy

content: "\e206";

glyphicon-paste

content: "\1f6aa";

glyphicon-door

content: "\1f511";

glyphicon-key

content: "\e209";

glyphicon-alert

content: "\e210";

glyphicon-equalizer

content: "\e211";

glyphicon-king

content: "\e212";

glyphicon-queen

content: "\e213";

glyphicon-pawn

content: "\e214";

glyphicon-bishop

content: "\e215";

glyphicon-knight

content: "\e216";

glyphicon-baby-formula

content: "\26fa";

glyphicon-tent

content: "\e218";

glyphicon-blackboard

content: "\e219";

glyphicon-bed

content: "\f8ff";

glyphicon-apple

content: "\e221";

glyphicon-erase

content: "\231b";

glyphicon-hourglass

content: "\e223";

glyphicon-lamp

content: "\e224";

glyphicon-duplicate

content: "\e225";

glyphicon-piggy-bank

content: "\e226";

glyphicon-scissors

content: "\e227";

glyphicon-bitcoin

content: "\e227";

glyphicon-btc

content: "\e227";

glyphicon-xbt

content: "\00a5";

glyphicon-yen

content: "\00a5";

glyphicon-jpy

content: "\20bd";

glyphicon-ruble

content: "\20bd";

glyphicon-rub

content: "\e230";

glyphicon-scale

content: "\e231";

glyphicon-ice-lolly

content: "\e232";

glyphicon-ice-lolly-tasted

content: "\e233";

glyphicon-education

content: "\e234";

glyphicon-option-horizontal

content: "\e235";

glyphicon-option-vertical

content: "\e236";

glyphicon-menu-hamburger

content: "\e237";

glyphicon-modal-window

content: "\e238";

glyphicon-oil

content: "\e239";

glyphicon-grain

content: "\e240";

glyphicon-sunglasses

content: "\e241";

glyphicon-text-size

content: "\e242";

glyphicon-text-color

content: "\e243";

glyphicon-text-background

content: "\e244";

glyphicon-object-align-top

content: "\e245";

glyphicon-object-align-bottom

content: "\e247";

glyphicon-object-align-left

content: "\e248";

glyphicon-object-align-vertical

content: "\e249";

glyphicon-object-align-right

content: "\e250";

glyphicon-triangle-right

content: "\e251";

glyphicon-triangle-left

content: "\e252";

glyphicon-triangle-bottom

content: "\e253";

glyphicon-triangle-top

content: "\e254";

glyphicon-console

content: "\e255";

glyphicon-superscript

content: "\e256";

glyphicon-subscript

content: "\e257";

glyphicon-menu-left

content: "\e258";

glyphicon-menu-right

content: "\e259";

glyphicon-menu-down

content: "\e260";

glyphicon-menu-up

Quelltext der Datei glyphiconsclasses.php

<?php
defined('_JEXEC') or die;
/**
2015-09-05
Last edit: 2021-01-21
glyphiconsclasses.php
Siehe ReadMe.txt.
Liest aktuelle glyphicons.less aus BS3-Plugin aus.
Gibt Beispiele für gefundene .glyphicons-CSS-Klassen aus.
Gibt content-Eigenschaft dieser CSS-Klassen aus.
*/
$html = array();

$file = '/media/plg_system_bs3ghsvs/glyphicons/glyphicons.less';

JFactory::getDocument()->addStylesheet('media/plg_system_bs3ghsvs/glyphicons/glyphicons.css');

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

$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>';
}
else
{
 
 $link = '<p><a rel="nofollow noreferrer noopener" href="' . JUri::root(true) . $file . '" target="_blank">' . $file . '</a></p>';
	$link .= '<p><a rel="nofollow noreferrer noopener" href="' . JUri::root(true) . str_replace('.less', '.css', $file) . '" target="_blank">' . str_replace('.less', '.css', $file) . '</a></p>';
 
 $fileContent = file_get_contents($fileAbs);

 // .glyphicon-asterisk               { &:before { content: "\2a"; } }
	$muster = '/(.glyphicon-[-a-z0-9]+(,.+?|))\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="glyphicon ' . $cssClass . ' large"></span><br />';
    $html[] = $cssClass . '<br />';
    $html[] = '<code class="language-html">' . htmlentities('<span class="glyphicon ' . $cssClass . '"></span>') . '</code>';
    $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>';
}

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

Beitrags-Schlagworte

CSS LESS Bootstrap Font

Kategorien: Hauptkategorie: Schnipsel; Kategorie: Sonstiges
Datum-Infos: Erstellt: 10.03.2013; Aktualisiert: 21.01.2021

Sonstige (Schnipsel)