postImage

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

blogImage

By Iheanacho Amarachi

Technical Writer

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 to your HTML project using Contrast bootstrap 5 library.

Prerequisites

To make the most of this article, you must 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 and the documentation is always available for better understanding.

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. If you are feeling confused about how to use the Bootstrap 5 UI kit icons on your project you can look at the Icon documentation.

html
<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" />

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.

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

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

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

Using Bootstrap 5 Icons

The Default Icons

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

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

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.

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>

Our border icons should look like this:

Bootstrap 5 Icons.

Spin Icons

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

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>

Bootstrap 5 Icons

Pull Icons

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

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

Bootstrap 5 Icons

Pulse Icons

The icon-pulse spins your icons a little faster.

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>

Bootstrap 5 Icons

Rotate Icons

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

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

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.
html
<i class="fa fa-user icon-lg"></i>
<i class="fa fa-user icon"></i>
<i class="fa fa-user icon-sm"></i>

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 the Bootstrap 5 UI kit.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner

Related Posts

Comments

...