Symbol

PDF-Ausschluss - Start

PDF-Ausschluss - Ende

Über Symbole

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

Bootstrap: https://icons.getbootstrap.com/
FontAwesome: https://fontawesome.com/search?ic=free-collection
Icon-Auswahl aus beiden Bibliotheken am Ende dieser Seite.

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.

Icon einfügen

Finden Sie ein Bootstrap oder FontAwesome Icon.
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 von Icons mit Ihrem Klassennamen.

Bootstrap Icons

https://icons.getbootstrap.com/

Diese Icons haben die Syntax bi bi-<iconname>.

bi bi-envelope

bi bi-chat-dots

bi bi-telephone

bi bi-megaphone

bi bi-headset

bi bi-building

bi bi-bank

bi bi-shop

bi bi-hospital

bi bi-house-door

bi bi-cart

bi bi-credit-card

bi bi-cash-coin

bi bi-receipt

bi bi-piggy-bank

bi bi-truck

bi bi-box-seam

bi bi-wrench

bi bi-hammer

bi bi-tools

bi bi-key

bi bi-person

bi bi-people

bi bi-person-badge

bi bi-briefcase

bi bi-calendar

bi bi-clock

bi bi-lightbulb

bi bi-globe

bi bi-shield-check

FontAwesome Icons

https://fontawesome.com/search?ic=free-collection

Diese Icons haben die Syntax fas-fa-<iconname>.

fas fa-envelope

fas fa-comments

fas fa-phone

fas fa-bullhorn

fas fa-headset

fas fa-building

fas fa-university

fas fa-store

fas fa-hospital

fas fa-home

fas fa-industry

fas fa-warehouse

fas fa-shopping-cart

fas fa-credit-card

fas fa-coins

fas fa-receipt

fas fa-piggy-bank

fas fa-truck

fas fa-box

fas fa-chart-line

fas fa-wrench

fas fa-hammer

fas fa-tools

fas fa-key

fas fa-user

fas fa-users

fas fa-id-badge

fas fa-briefcase

fas fa-handshake

fas fa-calendar-alt

fas fa-clock

fas fa-lightbulb

fas fa-globe