Manual:Extension/MenuEditor/Icons: Difference between revisions

Latest revision as of 14:14, 17 March 2025

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.

BlueSpice unterstützt Bootstrap Icons und Font Awesome free.

Let's assume you have a Link called Softwarekatalog.

To add a book icon with Font Awesome:

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

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

The link is now displayed with a book icon.

Custom icon

Alternatively, you can use a bootstrap icon:

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

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.

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.

@@ Line 3: / Line 3: @@
 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:'''
+BlueSpice unterstützt [https://icons.getbootstrap.com/ Bootstrap Icons] und [https://fontawesome.com/ Font Awesome free].
+Let's assume you have a Link called ''Softwarekatalog''.
+To add a book icon with Font Awesome:
 #'''Open''' the page ''MediaWiki:Common.css'' in edit mode.
@@ Line 10: / Line 14: @@
 <syntaxhighlight lang="css">
 a#n-Softwarekatalog::before {
-     content: '\e970';
+     content: '\F02d';
-     font-family: 'entypo';
+     font-family: fontawesome;
      margin-left: -20px;
      padding-right: 4px;
      vertical-align:middle;
 }
-</syntaxhighlight>The link is now displayed with an icon.
+</syntaxhighlight>The link is now displayed with a book icon.
 [[File:Manual:nav-icons.png|alt=Custom icon|center|thumb|250x250px|Custom icon]]
-Reload the page or empty the browser cache (<code>F5</code> on the keyboard) if the changes are not immediately visible.
+Alternatively, you can use a bootstrap icon:<syntaxhighlight lang="css">
+a#n-Softwarekatalog::before {
+    content: '\F194';
+    font-family: bootstrap-icons;
+    margin-left: -20px;
+    padding-right: 4px;
+    vertical-align:middle;
+}
+</syntaxhighlight>Reload the page or empty the browser cache (<code>F5</code> on the keyboard) if the changes are not immediately visible.
 If your link label includes special characters, you need to follow the instructions for  [[Manual:Extension/BlueSpiceDiscovery/Main navigation|navigation links with special characters]].
-===Available icons===
-You can see all available icons on the page <code>w/extensions/BlueSpiceFoundation/resources/bs.icons.php</code> of your wiki.
-[https://en.wiki.bluespice.com/w/extensions/BlueSpiceFoundation/resources/bs.icons.php 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===
 <span>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.</span>