(Opens in a new window - öffnet in einem neuen Fenster)
Kurz-Dokumentation CMSimple Plugin "FontAwesome"
Version FontAwesome 2.0 - released 2022-03
Das CMSimple Plugin FontAwesome 2.0 stellt eine minimale kostenlose Version von FontAwesome 5.15.4 zum Einsatz im Template und im Inhalt bereit.
Das CMSimple Plugin FontAwesome wendet sich vorwiegend an versierte Anwender, die sich bereits mit FontAwesome auskennen und in der Lage sind, in der Quelltextansicht des Editors zu arbeiten. Ab Version 2.0 gibt es aber auch einen einfachen Pluginaufruf.
Die komplette FontAwesome Dokumentation gibt es leider nur auf der Website des Anbieters in Englisch:
1. Systemvoraussetzungen
Voraussetzung ist eine funktionierende Installation von CMSimple 5.4 oder höher.
Empfohlen wird:
- CMSimple 5.7 oder höher
- Mindestens CMSimple 5.4 mit TinyMCE 4.5.7 2022 oder TinyMCE 4.9.11 2022
2. Installation
- zip-Datei herunterladen und mit einem geeigneten Programm entpacken
- Laden Sie den Ordner fontawesome/ in das Verzeichnis ./plugins/ Ihrer CMSimple Installation hoch.
3. Datei- und Ordnerrechte
Es müssen keine Datei- und Ordnerrechte vergeben werden.
4. Plugin Anwendung
Sie können Icons aus den Bereichen Solid (fas) und Brands (fab) verwenden (ca. 1.500 Icons). Weitere Icons sind nur mit einer kostenpflichtigen Pro-Lizenz von FontAwesome nutzbar: Die Lizenzmodelle von FontAwesome »
Weitere Informationen zu den verfügbaren freien Icons finden Sie hier »
4.1 Anwendung im Template
Im Template ist die Anwendung unproblematisch.
Beispiel:
<span class="fas fa-cat" style="font-size: 24px;"></span>
Die 1. Klasse des Aufrufes definiert den Bereich, aus dem das Icon stammt: "fab" für Brands oder "fas" für Solid.
Die 2. Klasse des Aufrufes definiert das Icon selbst.
4.2 Anwendung im Inhalt
4.2.1 Mittels Pluginaufruf im Bearbeitungsmodus des Editors
Fügen Sie folgenden Plugin-Aufruf in Ihre CMSimple Seite ein, an der Stelle, an der das FontAwesome Icon erscheinen soll:
{{{plugin:fa_icon('Bereich fa-IconName');}}}
Bereich: Der Bereich, aus dem das Icon stammt: "fab" für Brands oder "fas" für Solid.
fa-IconName: Der Name des Icons, mit vorangestelltem "fa-"
Beispiel:
{{{plugin:fa_icon('fas fa-cat');}}}
Vor und nach dem Pluginaufruf sollte jeweils ein Leerzeichen sein.
Den Pluginaufruf kann man markieren und stylen wie normalen Text.
Hinweis: Wenn der Pluginaufruf am Anfang eines Absatzes steht, wandelt CMSimple diesen Absatz automatisch in ein <div> um. Das kann man verhindern, indem man vor den Pluginaufruf ein geschütztes Leerzeichen, das keinen eigenen Raum einnimmt, setzt. Das geht in der Quelltextansicht (‍), oder ab CMSimple 5.7 oder mit dem TinyMCE 4.9.11 auch im Editor mit einem neuen Button in der Toolbar.
4.2.2 In der Quelltextansicht des Editors
Wer die FontAwesome Icons auch im Bearbeitungsmodus des Editors sehen will, der kann die entsprechenden Codes auch direkt in der Quelltextansicht in den Quelltext einfügen. Dabei ist jedoch einiges zu beachten.
Das einfügen von FontAwesome Icons muss mit <span> erfolgen, sonst entfernt der Editor den Code.
Leere spans wie z. B. <span class="fas fa-cat"></span> werden vom Editor entfernt.
Der Code eines FontAwesome Icons muss also mindestens ein Zeichen enthalten, das ausgegeben wird. Hier bietet sich das html Entitie ‍ an, das ist ein geschütztes Leerzeichen, das keinen eigenen Raum einnimmt.
Beispiel:
<span class="fas fa-cat">‍</span>
Die 1. Klasse des Aufrufes definiert den Bereich, aus dem das Icon stammt: "fab" für Brands oder "fas" für Solid.
Die 2. Klasse des Aufrufes definiert das Icon selbst.
Die FontAwesome Icons können wie normaler Text per inline-CSS gestyled werden.
Beispiel:
<span class="fas fa-cat" style="font-size: 24px; color: #930;">‍</span>
5. Konfiguration
Für FontAwesome gibt es keine Konfigurations Optionen.