Quelltext der Seite Handbuch:Erweiterung/MenuEditor/Icons

== 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''.

Um ein Buch-Symbol 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.
<syntaxhighlight lang="css">
a#n-Softwarekatalog::before {
    content: '\e970';
    font-family: 'entypo';
    margin-left: -20px;
    padding-right: 4px;
    vertical-align:middle;
}
</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]].

=== Verfügbare Symbole ===
Alle verfügbaren Symbole können Sie auf einer [https://de.wiki.bluespice.com/w/extensions/BlueSpiceFoundation/resources/bs.icons.php Übersichtsseite] hier einsehen.

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

=== 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.
[[Datei:Handbuch:nav-inspector.png|verweis=https://bs4-de.wiki.bluespice.com/wiki/Datei:Handbuch:nav-inspector.png|alternativtext=Developer Toolbar|zentriert|mini|650x650px|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:<syntaxhighlight lang="css">
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;
}
</syntaxhighlight>Nach dem Speichern von ''Common.css'' und dem erneuten Laden der Seite (über Tastaturtaste <code>F5</code>) wird Ihnen nun das gewünschte Symbol angezeigt.