Handbuch:Erweiterung/ContentDroplets/Symbol: Unterschied zwischen den Versionen

Versionsgeschichte interaktiv durchsuchen

Version vom 27. Oktober 2026, 13:51 Uhr

PDF-Ausschluss - Start

PDF-Ausschluss - Ende

Über Symbole

Das Content Droplet Symbol ermöglicht es, Icons aus den Bootstrap und FontAwesome Bibliotheken auf einer Seite einzufügen.

Kompatibilität Die offiziellen Icon-Seiten zeigen stets alle Icons der aktuellsten Bibliotheken. Es kann bei einem Versionsunterschied zwischen der in BlueSpice enthaltenen Bibliothek und der offiziellen Version daher sein, dass nicht alle Icons in BlueSpice dargestellt werden können.

Bootstrap Icons

Finden Sie ein Bootstrap-Icon auf der Liste der aktuell unterstützten Icons.
Markieren Sie den "class"-Namen (im Format bi bi-meinIcon) aund kopieren Sie ihn in Ihre Zwischenablage (Strg+c) (oder merken Sie sich den Namen).
Gehen Sie zurück auf Ihre Wikiseite.
Öffnen Sie den Droplets-Dialog im VisualEditor.
Wählen Sie das Droplet Symbol:
Symbol-Droplet einfügen
1. Suchen Sie das Droplet Symbol.
2. Klicken Sie auf die Karte Symbol.
3. Klicken Sie auf Einfügen.
Fügen Sie die Icon-Klasse aus der Zwischenablage ein (Strg+v) oder geben Sie sie manuell ein:
Vorlagen-Editor
Ändern Sie die Schriftgröße (optional), wenn Sie das Icon größer oder kleiner als die umgebende Schriftgröße darstellen wollen. Kleinere Icons sind meistens nicht kleiner als 0.85em und größere Icons meistens bis höchstens 2.5em.
Farbe: Wenn Sie möchten, dass sich die Farbe vom umgebenden Text unterscheidet, können Sie eine beliebige Webfarbe angeben (z. B. einen Farbnamen wie blue oder einen Hex-Wert wie #0059b3 für ein spezifischeres Blau). Eine Liste der Webfarben finden Sie unter https://www.w3schools.com/colors/colors_picker.asp
Vertikale Ausrichtung: Es sollte nicht erforderlich sein, einen Ausrichtungswert anzugeben. Der Standard ist auf text-top eingestellt und funktioniert normalerweise in Überschriften und im Fließtext. Wenn es schlecht ausgerichtet aussieht, können Sie andere Werte für die vertikale Ausrichtung ausprobieren, z. B. text-bottom. Eine vollständige Liste der möglichen Werte finden Sie unter https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
Klicken Sie auf Änderungen speichern.

Das Symbol ist nun auf der Seite sichtbar.

Eingefügtes Bootstrap-Icon

Icon-Auswahl

Hier finden Sie eine Auswahl beliebter Icons mit Ihrem Klassennamen:

bi bi-clock

FontAwesome Icons

Die Erweiterung FontAwesome ist ab BlueSpice Version 4.3 gebündelt. In einem unserer nächsten Patches werden wir die Möglichkeit hinzufügen, sie im Symbol-Droplet zu verwenden. In der Zwischenzeit können Sie FontAwesome-Symbole mit der Parser-Funktion {{#fas:...}} im Quellbearbeitungsmodus hinzufügen. Siehe die offizielle MediaWiki-Dokumentation.

@@ Zeile 1: / Zeile 1: @@
-==Anwendung==
+==Über Symbole==
-===Bootstrap Icons===
+Das Content Droplet Symbol ermöglicht es, Icons aus den Bootstrap und FontAwesome Bibliotheken auf einer Seite einzufügen.
+{{Textbox|boxtype=note|header=Kompatibilität|text=Die offiziellen Icon-Seiten zeigen stets alle Icons der aktuellsten Bibliotheken. Es kann bei einem Versionsunterschied zwischen der in BlueSpice enthaltenen Bibliothek und der offiziellen Version daher sein, dass nicht alle Icons in BlueSpice dargestellt werden können.|icon=yes}}
+== Bootstrap Icons ==
 #'''Finden'''  Sie ein Bootstrap-Icon  [https://de.wiki.bluespice.com/w/skins/BlueSpiceDiscovery/resources/bootstrap/icons/index.html auf der '''Liste der aktuell unterstützten Icons.''']
-#'''Markieren''' Sie den "class"-Namen (im Format ''bi bi-meinIcon'') aund '''kopieren''' Sie ihn in Ihre Zwischenablage (Strg+c).
+#'''Markieren''' Sie den "class"-Namen (im Format ''bi bi-meinIcon'') aund '''kopieren''' Sie ihn in Ihre Zwischenablage (Strg+c) (oder merken Sie sich den Namen).
 #'''Gehen''' Sie zurück auf Ihre Wikiseite.
 #'''Öffnen''' Sie den Droplets-Dialog im VisualEditor.
@@ Zeile 9: / Zeile 12: @@
 ##'''Klicken''' Sie auf die Karte ''Symbol.''
 ##'''Klicken''' Sie auf ''Einfügen.''
-#'''Fügen'''  Sie die Icon-Klasse aus der Zwischenablage '''ein''' (Strg+v):[[Datei:vorlagen-editor-icon.png|alternativtext=Vorlagen-Editor|zentriert|mini|400x400px|Vorlagen-Editor]]
+#'''Fügen'''  Sie die Icon-Klasse aus der Zwischenablage '''ein''' (Strg+v) oder geben Sie sie manuell ein:[[Datei:vorlagen-editor-icon.png|alternativtext=Vorlagen-Editor|zentriert|mini|400x400px|Vorlagen-Editor]]
 #'''Ändern''' Sie die Schriftgröße (optional), wenn Sie das Icon größer oder kleiner als die umgebende Schriftgröße darstellen wollen. Kleinere Icons sind meistens nicht kleiner als 0.85em und größere Icons meistens bis höchstens 2.5em.
 #'''Farbe:''' Wenn Sie möchten, dass sich die Farbe vom umgebenden Text unterscheidet, können Sie eine beliebige Webfarbe angeben (z. B. einen Farbnamen wie ''blue'' oder einen Hex-Wert wie ''#0059b3'' für ein spezifischeres Blau). Eine Liste der Webfarben finden Sie unter https://www.w3schools.com/colors/colors_picker.asp
@@ Zeile 18: / Zeile 21: @@
 [[Datei:bootstrap-icon-on page.png|alternativtext=Bootstrap Icon bi bi-awards vor einer Hauptüberschrift.|zentriert|mini|450x450px|Eingefügtes Bootstrap-Icon]]
+=== Icon-Auswahl ===
+Hier finden Sie eine Auswahl beliebter Icons mit Ihrem Klassennamen:
+{{Icon}}
+bi bi-clock
-===FontAwesome Icons===
+== FontAwesome Icons ==
 Die Erweiterung [[Referenz:FontAwesome|FontAwesome]] ist ab BlueSpice Version 4.3 gebündelt. In einem unserer nächsten Patches werden wir die Möglichkeit hinzufügen, sie im Symbol-Droplet zu verwenden. In der Zwischenzeit können Sie FontAwesome-Symbole mit der Parser-Funktion <code><nowiki>{{#fas:...}}</nowiki></code> im Quellbearbeitungsmodus hinzufügen. [[mediawikiwiki:Extension:FontAwesome#Usage|Siehe die offizielle MediaWiki-Dokumentation]].
 __FORCETOC__