Handbuch:Erweiterung/BlueSpiceDiscovery/Hauptnavigation anpassen/Icons

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:

1. Öffnen Sie die Seite MediaWiki:Common.css im Bearbeitungsmodus.
2. 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.

Verfügbare Symbole

Alle verfügbaren Symbole können Sie auf einer Ü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 MediaWiki:Common.css müssen Sie die Einträge font-family (Schriftart) und content (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.

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.

PDF-Ausschluss - Start

---

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

PDF-Ausschluss - Ende

Cascading Style Sheets. Eine Computersprache für die Gestaltung digitaler, vorwiegend webbasierter Dokumente.

Set von Wiki-Erweiterungen, mit dem strukturierte Daten erstellt und abgefragt werden können.