🤩
Windframe Import update is finally here!

Icon

Bootstrap 5 Icon

Bootstrap 5 Icons are little symbols or images that can serve as a link, provide information, or simply be aesthetic.

The Contrast Bootstrap 5 Icon component allows you to incorporate brand icons (such as Twitter, Facebook, and Stack Overflow) in your project with predefined styles. However, only pro users have access to this feature. You can learn more on How to add Icons to your Bootstrap 5 Project

Default Icon

Bootstrap Icon Default

html
html
<button type="button" class="btn btn-primary">
<i class="fa fa-book"></i>
<span> Click me </span>
</button>
<button type="button" class="btn btn-secondary">
<i class="fa fa-user"></i>
<span>Click me </span>
</button>
<button type="button" class="btn btn-success">
<i class="fa fa-check"></i>
<span> Click me </span>
</button>
<button type="button" class="btn btn-danger">
<i class="fa fa-times"></i>
<span> Click me </span>
</button>
<button type="button" class="btn btn-dark">
<i class="fa fa-home"></i>
<span> Click me </span>
</button>
<button type="button" class="btn btn-info">
<i class="fa fa-book"></i>
<span> Click me </span>
</button>
<button type="button" class="btn btn-outline-warning">
<i class="fa fa-lock"></i>
<span> Click me </span>
</button>

Border Icons

To give your icons a border, use the icon-border property.

Bootstrap Icons Border

html
html
<i class="fa fa-book icon-border"></i>
<i class="fa fa-user icon-border"></i>
<i class="fa fa-check icon-border"></i>
<i class="fa fa-times icon-border"></i>
<i class="fa fa-home icon-border"></i>
<i class="fa fa-book icon-border"></i>
<i class="fa fa-lock icon-border"></i>

Spin Icons

Use the icon-spin class to spin your Contrast Bootstrap 5 icons.

Bootstrap Icon Spin

html
html
<i class="fa fa-book icon-spin"></i>
<i class="fa fa-user icon-spin"></i>
<i class="fa fa-check icon-spin"></i>
<i class="fa fa-times icon-spin"></i>
<i class="fa fa-home icon-spin"></i>
<i class="fa fa-book icon-spin"></i>
<i class="fa fa-lock icon-spin"></i>

Pull Icons

Bootstrap Icon Pull

html
html
<i class="fa fa-book icon-pull"></i>

Pulse Icons

To make your icons spin a little quicker, use the icon-pulse class.

Bootstrap Icons Pulse

html
html
<i class="fa fa-book icon-pulse"></i>
<i class="fa fa-user icon-pulse"></i>
<i class="fa fa-check icon-pulse"></i>
<i class="fa fa-times icon-pulse"></i>
<i class="fa fa-home icon-pulse"></i>
<i class="fa fa-book icon-pulse"></i>
<i class="fa fa-lock icon-pulse"></i>

Rotate Icons

Bootstrap Icons Rotate

html
html
<i class="fa fa-user icon-rotate"></i> <i class="fa fa-check icon-rotate"></i>

Sizes

Use the icon class, then append the size code to determine how small or huge you want your icon to be (lg for large, and sm for small). The size is set to medium by default.

Bootstrap Icon Sizes

html
html
<i class="fa fa-user icon-lg"></i>
<i class="fa fa-user icon"></i>
<i class="fa fa-user icon-sm"></i>

Adding Icons is simple with the bootstrap 5 UI kit. You can check out

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast