Icons

Icons

Canvas bundles several icon fonts through a single css/font-icons.css file, which imports Font Awesome, Bootstrap Icons, and Unicons (Line Icons). You reference an icon by adding its class to an <i> element. Utility classes let you size, rotate, flip, and style icons consistently.

Icon sets included

font-icons.css imports these libraries:

@import url("icons/font-awesome.css"); /* fa-* */
@import url("icons/bootstrap-icons.css"); /* bi-* */
@import url("icons/unicons.css"); /* uil-* */

• Bootstrap Icons: prefix bi-. The primary icon set used across Canvas demos.
• Font Awesome: prefixes fa-solid, fa-regular, fa-brands plus the fa-* name.
• Unicons (Line Icons): base class uil plus uil-*.

Bootstrap Icons (bi-*)

The most common pattern in Canvas. Add a single bi- class to an <i>.

<i class="bi-star-fill"></i>
<i class="bi-envelope-at"></i>
<i class="bi-cursor"></i>
<i class="bi-bell"></i>
<i class="bi-check-circle-fill"></i>

Icons inherit the current text color and font size, so you can size them with Bootstrap type utilities:

<i class="bi-bag-plus fs-2 d-block"></i>
<i class="bi-arrow-right"></i>

Font Awesome (fa-*)

Choose a style class (fa-solid, fa-regular, or fa-brands) alongside the icon name.

<i class="fa-solid fa-check text-success"></i>
<i class="fa-solid fa-infinity color"></i>
<i class="fa-brands fa-wpforms color"></i>
<i class="fa-solid fa-user-shield"></i>

Unicons / Line Icons (uil-*)

Add the base uil class plus the specific icon.

<i class="uil uil-search"></i>
<i class="uil uil-shopping-bag"></i>
<i class="uil uil-angle-up"></i>

Sizing utilities

font-icons.css provides scale helpers that work with any of the three sets:

• icon-lg: slightly larger with vertical alignment tuning.
• icon-2x, icon-3x, icon-4x, icon-5x: fixed multiples of the current size.
• icon-fw: fixed width, handy for aligning icons in lists.

<i class="bi-heart icon-2x"></i>
<i class="fa-solid fa-star icon-3x"></i>

Transform and style utilities

• icon-rotate-90, icon-rotate-180, icon-rotate-270: rotate the glyph.
• icon-flip-horizontal, icon-flip-vertical: mirror the glyph.
• icon-spin: continuously spin (great for loaders).
• icon-border, icon-inverse: bordered and inverse color variants.
• icon-stacked with icon-stacked-1x / icon-stacked-2x: layer two icons.

<i class="fa-solid fa-spinner icon-spin"></i>
<i class="bi-arrow-up icon-rotate-90"></i>

Styled icons (i-* wrappers)

Canvas also ships display styles for standalone feature icons via i-* classes: i-plain, i-alt, i-bordered, i-light, i-style, and sizes i-small, i-medium, i-large, i-xlarge, i-xxlarge.

<i class="i-plain bi-circle-half"></i>
<i class="i-plain i-xlarge icon-et-pictures"></i>
<i class="fa-solid fa-infinity color ms-0 mb-4 i-xlarge i-plain d-block float-none"></i>

Tips

• Bootstrap Icons (bi-*) are the default choice in Canvas; reach for Font Awesome when you need a brand icon (fa-brands).
• Size icons with Bootstrap font-size utilities (fs-2, fs-4) or the icon-2x family, whichever fits your layout.
• Use icon-fw to keep icons vertically aligned inside lists.
• Combine i-plain with i-xlarge for large decorative feature icons in cards and info boxes.
• Give inline icons spacing with margin utilities like me-1 or me-2 so they sit neatly beside text.