Manual:Extension/ContentDroplets/Icon

PDF exclude - start

← Extension/ContentDroplets

PDF exclude - end

About icons

The Icon Content droplet allows you to insert icons from the Bootstrap and FontAwesome libraries onto a page.

Bootstrap: https://icons.getbootstrap.com/

FontAwesome: https://fontawesome.com/search?ic=free-collection

Compatibility The official icon websites always display all icons from the most recent versions of these libraries. If there is a version discrepancy between the library included in BlueSpice and the official version, it is possible that not all icons will be available for display within BlueSpice.

Bootstrap icons

1. Find a bootstrap icon from the list of currently supported icons.
2. Click on the icon you would like to use. The icon page shows you the class-name of the icon on the right side of the page:
3. Highlight the class name (it has the format bi bi-myicon) and copy it to your clipboard (ctrl+c).
4. Go back to your wiki page.
5. Open the Droplets dialog in VisualEditor:
6. Select the Icon-droplet:

   

   Selecting the icon droplet

   1. Search for the droplet "Icon"
   2. Click on the Icon-card
   3. Click the Insert button
7. Copy the icon class from your clipboard:

   

   Template editor

8. Change the font size (optional) if you want the size to be different from the text surrounding it (e.g., from the size of a heading if the icon is placed in the heading or of the paragraph text if the icon is placed in the flow-text. Smaller than text icons are usually sized no smaller than 0.85em and larger icons up to 2.5em.
9. Color: If you want the color to be different from the surrounding text, you can specify any web color (e.g., a color name like blue or a hex-valuesuch as #0059b3 for a more specific blue). A list of web colors can be found at https://www.w3schools.com/colors/colors_picker.asp
10. Vertical alignment: It should not be necessary to provide an alignment value. The standard is set to text-top and usually works in headings and in flow-text. If it looks a little off, you can try other vertical-alignment values, such as text-bottom. For a full list of possible values, see https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
11. Click Apply changes.

The icon is now displayed on the page.

Inserted Bootstrap icon

FontAwesome icons

The exension FontAwesome is bundled starting at BlueSpice version 4.3. In one of our next patches, we will add the possibility to use them in the Icon droplet. In the meantime, you can add FontAwesome icons with the {{#fas:...}} parser-function in source edit mode. See the official MediaWiki documentation.

Icon-Auswahl

Hier finden Sie eine Auswahl von Icons mit Ihrem Klassennamen.

Bootstrap Icons

https://icons.getbootstrap.com/

Diese Icons haben die Syntax bi bi-<iconname>.

bi bi-envelope

bi bi-chat-dots

bi bi-telephone

bi bi-megaphone

bi bi-headset

bi bi-building

bi bi-bank

bi bi-shop

bi bi-hospital

bi bi-house-door

bi bi-cart

bi bi-credit-card

bi bi-cash-coin

bi bi-receipt

bi bi-piggy-bank

bi bi-truck

bi bi-box-seam

bi bi-wrench

bi bi-hammer

bi bi-tools

bi bi-key

bi bi-person

bi bi-people

bi bi-person-badge

bi bi-briefcase

bi bi-calendar

bi bi-clock

bi bi-lightbulb

bi bi-globe

bi bi-shield-check

FontAwesome Icons

https://fontawesome.com/search?ic=free-collection

Diese Icons haben die Syntax fas-fa-<iconname>.

fas fa-envelope

fas fa-comments

fas fa-phone

fas fa-bullhorn

fas fa-headset

fas fa-building

fas fa-university

fas fa-store

fas fa-hospital

fas fa-home

fas fa-industry

fas fa-warehouse

fas fa-shopping-cart

fas fa-credit-card

fas fa-coins

fas fa-receipt

fas fa-piggy-bank

fas fa-truck

fas fa-box

fas fa-chart-line

fas fa-wrench

fas fa-hammer

fas fa-tools

fas fa-key

fas fa-user

fas fa-users

fas fa-id-badge

fas fa-briefcase

fas fa-handshake

fas fa-calendar-alt

fas fa-clock

fas fa-lightbulb

fas fa-globe

PDF exclude - start

---

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

PDF exclude - end