Icons

Icons anpassen[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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.