Handbuch:Erweiterung/MenuEditor/Icons: Unterschied zwischen den Versionen

Aktuelle Version vom 17. März 2025, 14:09 Uhr

Icons anpassen

Sie können den Navigationslinks in der Hauptnavigation individuelle Symbole zuweisen, indem Sie das Styling mittels CSS anpassen.

BlueSpice unterstützt Bootstrap Icons und Font Awesome free.

Nehmen wir an, Sie haben einen Link Softwarekatalog.

Um ein Buch-Symbol aus Font Awesome hinzuzufügen:

Öffnen Sie die Seite MediaWiki:Common.css im Bearbeitungsmodus.
Fügen Sie am Ende der Seite die Anweisung für ein Font Awesome Symbol hinzu und speichern Sie sie ab.

a#n-Softwarekatalog::before {
    content: '\F02d';
    font-family: fontawesome;
    margin-left: -20px;
    padding-right: 4px;
    vertical-align:middle;
}

Der Navigationslink hat nun ein Buchsymbol.

Navigations-Icon

Alternative können Sie auch ein Bootstrap-Icon benutzen:

a#n-Softwarekatalog::before {
    content: '\F194';
    font-family: bootstrap-icons;
    margin-left: -20px;
    padding-right: 4px;
    vertical-align:middle;
}

Damit die Änderung sichtbar wird, ist in der Regel ein Leeren des Browser-Caches (F5-Taste) notwendig. Sollte das angepasste Symbol nicht angezeigt werden, nachdem Sie den Browser-Cache geleert haben, folgen Sie der Anleitung Navigationslinks mit Sonderzeichen.

Navigationslinks mit Sonderzeichen

Bei der Verwendung von Sonderzeichen kann es zu Schwierigkeiten kommen, da diese im HTML-Code der Browser-Seite umgewandelt werden. In diesem Fall klicken Sie mit der rechten Maustaste auf den entsprechenden Eintrag und wählen Sie, abhängig vom verwendeten Browser, "Untersuchen" aus, um die Developer Toolbar zu öffnen. Dort wird Ihnen die ID des Links angezeigt.

Developer Toolbar

Wenn Sie zum Beispiel die Linkbeschreibung Einführung in Semantic MediaWiki mit dem Buchsymbol darstellen wollen, kopieren Sie den Wert aus der ID des Links und fügen Sie folgende Formatierungsanweisung in MediaWiki:Common.css ein:

a#n-Softwarekatalog::before,a[id="n-Einf.C3.BChrung-Semantic-MediaWiki"]::before  {content: '\e970';
    font-family: 'entypo';margin-left: -20px;
    padding-right: 4px;vertical-align:middle;
}

Nach dem Speichern von Common.css und dem erneuten Laden der Seite (über Tastaturtaste F5) wird Ihnen nun das gewünschte Symbol angezeigt.

Feedback zur Dokumentation ist im Community-Forum möglich.

@@ Zeile 1: / Zeile 1: @@
 == Icons anpassen ==
-Sie können den Navigationslinks in der Hauptnavigation individuelle Symbole zuweisen, indem Sie das Styling mittels CSS anpassen. Nehmen wir an, Sie haben einen Link ''Softwarekatalog''.
+Sie können den Navigationslinks in der Hauptnavigation individuelle Symbole zuweisen, indem Sie das Styling mittels CSS anpassen.
-Um ein Buch-Symbol hinzuzufügen:
+BlueSpice unterstützt [https://icons.getBootstrap.com Bootstrap Icons]  und  [https://fontawesome.com Font Awesome free].
+Nehmen wir an, Sie haben einen Link ''Softwarekatalog''.
+Um ein Buch-Symbol aus ''Font Awesome'' hinzuzufügen:
 # '''Öffnen''' Sie die Seite ''MediaWiki:Common.css'' im Bearbeitungsmodus.
-# '''Fügen''' Sie folgende Zeilen am Ende der Seite '''hinzu''' und speichern Sie sie ab.
+# '''Fügen''' Sie am Ende der Seite die Anweisung für ein ''Font Awesome'' Symbol '''hinzu''' und speichern Sie sie ab.
 <syntaxhighlight lang="css">
 a#n-Softwarekatalog::before {
-     content: '\e970';
+     content: '\F02d';
-     font-family: 'entypo';
+     font-family: fontawesome;
      margin-left: -20px;
      padding-right: 4px;
@@ Zeile 17: / Zeile 21: @@
 </syntaxhighlight>Der Navigationslink hat nun ein Buchsymbol.
 [[Datei:Handbuch:nav-icons.png|verweis=https://bs4-de.wiki.bluespice.com/wiki/Datei:Handbuch:nav-icons.png|alternativtext=Navigations-Icon|zentriert|mini|250x250px|Navigations-Icon]]
-Damit die Änderung sichtbar wird, ist in der Regel ein Leeren des Browser-Caches (F5-Taste) notwendig. Sollte das angepasste Symbol nicht angezeigt werden, nachdem Sie den Browser-Cache geleert haben, folgen Sie der Anleitung [[Handbuch:Erweiterung/BlueSpiceDiscovery/Hauptnavigation anpassen#Navigationslinks mit Sonderzeichen|Navigationslinks mit Sonderzeichen]].
+Alternative können Sie auch ein Bootstrap-Icon  benutzen:<syntaxhighlight lang="css">
+a#n-Softwarekatalog::before {
-=== Verfügbare Symbole ===
+    content: '\F194';
-Alle verfügbaren Symbole können Sie auf einer [https://de.wiki.bluespice.com/w/extensions/BlueSpiceFoundation/resources/bs.icons.php Übersichtsseite] hier einsehen.
+    font-family: bootstrap-icons;
+    margin-left: -20px;
-In der oberen Zeile können Sie sich durch verschiedene Schriftarten klicken, darunter finden Sie die Icons mit den zugehörigen Zeichenschlüsseln. In <code>MediaWiki:Common.css</code> müssen Sie die Einträge <code>font-family</code> (Schriftart) und <code>content</code> (Zeichenschlüssel) entsprechend anpassen. Alternativ können Sie auch die BlueSpice
+    padding-right: 4px;
+    vertical-align:middle;
+}
+</syntaxhighlight>Damit die Änderung sichtbar wird, ist in der Regel ein Leeren des Browser-Caches (F5-Taste) notwendig. Sollte das angepasste Symbol nicht angezeigt werden, nachdem Sie den Browser-Cache geleert haben, folgen Sie der Anleitung [[Handbuch:Erweiterung/BlueSpiceDiscovery/Hauptnavigation anpassen#Navigationslinks mit Sonderzeichen|Navigationslinks mit Sonderzeichen]].
 === Navigationslinks mit Sonderzeichen ===