Manual:Extension/BlueSpiceDiscovery/Main navigation/Icons

Icons anpassen

You can assign individual symbols to the navigation links in the main navigation by adapting the styling using CSS. Let's say you have a link named Softwarekatalog.

To add a book icon:

1. Open the page MediaWiki:Common.css in edit mode.
2. Add the following lines at the end of the page.
3. Save the page.

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

The link is now displayed with an icon.

Custom icon

Reload the page or empty the browser cache (F5 on the keyboard) if the changes are not immediately visible. If your link label includes special characters, you need to follow the instructions for navigation links with special characters.

Available icons

You can see all available icons on the page w/extensions/BlueSpiceFoundation/resources/bs.icons.php of your wiki.

A list with all icons and their character keys on this helpdesk is available here and is the same for any default installation of a BlueSpice wiki.

In the upper line you can click through different fonts, below you find the icons with the corresponding character keys. In MediaWiki:Common.css you have to adjust the entries font-family (entypo, fontawesome, icomoon, ...) and content (character key) accordingly.

Navigation links with special characters

If the text for the menu items contains special characters, they are converted in the HTML code of the page. In this case, right-click on the corresponding entry and, depending on the browser used, select "Inspect" or similar.

Developer toolbar

For example, if you want to display the link description Introduction to Semantic MediaWiki with the book symbol, copy the value from the link ID and paste the following formatting instruction in MediaWiki:Common.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;
}

After saving Common.css and reloading the page you now see the selected icon.

---

To submit feedback about this documentation, visit our community forum.