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 or FontAwesome icon.
2. Highlight the class name (it has the format bi bi-myicon) and copy it to your clipboard (ctrl+c) (or remember the class name).
3. Go back to your wiki page.
4. Open the Droplets dialog in VisualEditor:
5. 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
6. Copy the icon class from your clipboard (or enter it manually):

   

   Template editor

7. 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.
8. 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
9. 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.
10. Click Apply changes.

The icon is now displayed on the page.

Inserted Bootstrap icon

Icon selection

Here is a selection of supported icons and their class names.

Bootstrap icons

https://icons.getbootstrap.com/

These icons have the 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

These icons have the 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