postImage

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

blogImage

By Iheanacho Amarachi

Technical Writer

Last updated: 11 June 2024

Bootstrap 5 Icons

Bootstrap 5 icons are important for modern web design because they provide a visually appealing way to share information and interact with users. In this article, you'll learn how to use the Contrast Bootstrap 5 library to add Bootstrap 5 icons to your HTML projects.

Table Of Contents

  1. Introduction
  2. Prerequisites
  3. Overview of Contrast Bootstrap 5
  4. Installation: Adding Bootstrap 5 UI Library CDN
  5. Implementing Icons in Your Project
    • Default Icons
    • Border Icons
    • Spin Icons
    • Pull Icons
    • Pulse Icons
    • Rotate Icons
    • Size Variations
  6. Conclusion
  7. Resources

Introduction

Bootstrap 5 icons are useful visual tools that make websites more user-friendly. They help users navigate a webpage and make the site more visually appealing. Whether you need to link to a specific page or just want to add some decoration, Bootstrap 5 icons are a great option.

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

Prerequisites

To follow this tutorial effectively, you should have:

  • Basic knowledge of HTML and CSS.

What is Contrast bootstrap 5 and why?

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.

Installation: Adding 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>

Implementing Bootstrap 5 Icons in Your Project

The Default Icons

Use the <i> element to add default icons, specifying the icon type with a second class:

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

In this guide, we've explored the significant role that Bootstrap 5 icons play in enhancing web design. We started by defining what Bootstrap 5 icons are and discussed their importance in making web pages more visually appealing and functional. Following that, we showed you how to seamlessly integrate the Contrast Bootstrap 5 CDN into your HTML projects, giving you access to a plethora of predefined icon styles. We then walked through various methods of incorporating Bootstrap 5 icons into your projects, using the diverse array of styles available in the Bootstrap 5 UI kit. This allows for improved navigation and interaction, making your website more user-friendly.

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.

Related Posts

Previous
How to create a Responsive Bootstrap 5 Sidebar
Next
How to create a Angular Bootstrap Sidebar