DEV Community

Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

2

Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project

Bootstrap 5 Icons are small pictures or symbols representing a piece of information or content on a website. Icons can also link to different parts of the web page or a different website entirely (e.g., social media icons on a website usually link to the company's social media account, brand, or person).

Bootstrap 5 Icons can also be entirely decorative and be implemented to complement the overall look or aesthetic of a website. Either way, icons have become a more prominent feature in modern-day websites. It has become almost impossible to see a website without one.

Table Of Contents

  • What are we building?
  • Prerequisites
  • What is Contrast and why?
  • Creating our Bootstrap 5 Sidebar
  • The Default Icons
  • Border Icons
  • Spin Icons
  • Pull Icons
  • Pulse Icons
  • Rotate Icons
  • Size Variations
  • Conclusion
  • Resources

What are we building?

In this article, we will walk through adding icons in your HTML project using Contrast bootstrap 5 library.

Prerequisites

To make the most of this article, it is essential that you have the following:

  • A basic understanding of HTML.
  • A basic understanding of CSS.

What is Contrast bootstrap 5 and why?

Contrast or Contrast Bootstrap 5 is an elegant bootstrap UI kit featuring over 2000+ essential components. Contrast helps simplify the web development process and can be integrated with any project to build mobile-first, responsive, and elegant websites and web apps. With predefined styles, you can now create web pages faster than ever without having to write any code

Adding the Bootstrap 5 UI library CDN

The Contrast Bootstrap 5 UI kit allows us to use predefined styles, accessed with the contrast library class names. To use these styles in our HTML project, we need to install the Contrast Bootstrap 5 library by adding the CDNs.

We include the CSS CDN responsible for the Bootstrap styling in the <head> in our HTML file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />

Enter fullscreen mode Exit fullscreen mode

After including the CSS CDN, we include the JavaScript CDN links at the bottom of our project in the <body>. We do this because we want the components to load before adding the interactive functionality, that JavaScript gives us.

<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>

Enter fullscreen mode Exit fullscreen mode

After adding both the CSS and JavaScript CDNs, our HTML file should look like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Using Bootstrap 5 Icons

The Default Icons

We use the i element to add icons in our project.

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

Enter fullscreen mode Exit fullscreen mode

The second class indicates what small picture we want on our icon.

Creating Default Icons would look like this on your browser:

Bootstrap 5 Icons

Border Icons

Use the icon-border to give your icons a border.

<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>

Enter fullscreen mode Exit fullscreen mode

Our border icons should look like this:

Bootstrap 5 Icons.

Spin Icons

To spin your bootstrap 5 icons, use the icon-spin class.

<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>

Enter fullscreen mode Exit fullscreen mode

Bootstrap 5 Icons

Pull Icons

To flip your icons to its mirror image, give your the class of icon-pull.

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

Enter fullscreen mode Exit fullscreen mode

Bootstrap 5 Icons

Pulse Icons

The icon-pulse to spin your icons a little faster.

<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>

Enter fullscreen mode Exit fullscreen mode

Bootstrap 5 Icons

Rotate Icons

To rotate your icon 360 degrees, use the icon-rotate class.

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

Enter fullscreen mode Exit fullscreen mode

After adding the class we should see this.

Bootstrap 5 Icons

Size Variations

With the Bootstrap 5 UI kit, we can specify what size of icons we want.

There are three different sizes variations of the bootstrap icons:

  • the small size, is indicated by the icon-sm class.
  • the medium size, which is also the default value, icon.
  • the large size, is indicated by the icon-lg class.
<i class="fa fa-user icon-lg"></i>
<i class="fa fa-user icon"></i>
<i class="fa fa-user icon-sm"></i>

Enter fullscreen mode Exit fullscreen mode

Bootstrap 5 Icons

Conclusion

This article discussed what Bootstrap 5 icons are and why you would need one on your web page. Next, we included the Contrast Bootstrap 5 CDN in our HTML page and finally added icons in our HTML project using the different predefined styles available from Bootstrap 5 UI kit.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more