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" />
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>
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>
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>
The second class indicates what small picture we want on our icon.
Creating Default Icons would look like this on your browser:
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>
Our border icons should look like this:
.
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>
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>
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>
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>
After adding the class we should see this.
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-smclass. - the medium size, which is also the default value,
icon. - the large size, is indicated by the
icon-lgclass.
<i class="fa fa-user icon-lg"></i>
<i class="fa fa-user icon"></i>
<i class="fa fa-user icon-sm"></i>
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.
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.