Components - Icons

Import a font icon library - Remix Icon

https://remixicon.com - Simply Delightful Icon System

Install guide:

  • Copy the CSS into your portal theme (in backoffice -> look & feel -> theme -> stylesheet, en Français : Backoffice -> Apparence -> Thème -> Feuille de style)
  • Make live (save and apply your theme)
  • Finally, simply use icons into your pages

Usage:

In your HTML, on i tag, set the class to ri- followed by the name of the icon. For example, for the alarm-fill and alarm-line icons, try:

  • <i class="ri-alarm-fill"></i>
  • <i class="ri-alarm-line" style="font-size: 2rem; color: cornflowerblue;"></i>

Note: Attribution is required by Remix Icon license. The provided CSS contains embedded comments with necessary attribution. While using this code normally, you shouldn’t need to do anything additional to provide attribution.

Import a font icon library - IcoFont

IcoFont.com - 2100+ free icons to spice up your creative designs

Install guide:

  • Copy the CSS into your portal theme (in backoffice -> look & feel -> theme -> stylesheet, en Français : Backoffice -> Apparence -> Thème -> Feuille de style)
  • Make live (save and apply your theme)
  • Finally, simply use icons into your pages

Usage:

In your HTML, on i tag, set the class to icofont- followed by the name of the icon. For example, for the alarm icon, try:

  • <i class="icofont-alarm"></i>
  • <i class="icofont-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

Note: Attribution is required by IcoFont licenses. The provided CSS contains embedded comments with necessary attribution. While using this code normally, you shouldn’t need to do anything additional to provide attribution.

Import a font icon library - Bootsrap icons

Bootstrap Icons - Free, high quality, open source icon library with over 1,300 icons.

Install guide:

  • Copy the CSS into your portal theme (in backoffice -> look & feel -> theme -> stylesheet, En Français : Backoffice -> Apparence -> Thème -> Feuille de style)
  • Make live (save and apply your theme)
  • Finally, simply use icons into your pages

Usage:

In your HTML, on i tag, set the class to bi- followed by the name of the icon. For example, for the alarm icon, try:

  • <i class="bi-alarm"></i>
  • <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>