Using Icons in Bootstrap 5
Bootstrap now includes over 1,300 high quality icons, which are available in SVGs, SVG sprite, or web fonts format. You can use them with or without Bootstrap in any project.
The advantage of using font icons is, you can create icons of any color just through applying the CSS color property. Also, to change the size of icons you can simply use the CSS font-size property.
Now, let’s see how to include and use Bootstrap icons on a web page.
Including Bootstrap Icons in a Web Page
The simplest way to include Bootstrap icons in a web page is using the CDN link. This CDN link basically points to a remote CSS file that includes all the necessary classes to generate font icons.
You can include Bootstrap icons in a Bootstrap template as well as in a simple web page without using the Bootstrap framework. Let’s take a look at the following example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Including Bootstrap Icons in HTML</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<h1><i class="bi-globe"></i> Hello, world!</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>How to Use Bootstrap Icons in Your Code
To use Bootstrap icons in your code you’ll require an <i> tag with an individual icon class .bi-* applied on it. The general syntax for using Bootstrap icons is:
<i class=”bi-class-name“></i>
Where class-name is the name of the particular icon class, e.g. search, person, calendar, star, globe, facebook, twitter, and so on. See the list of all Bootstrap icons classes.
For example, to place search icon inside a button you could do something like this:
Example
<button type="submit" class="btn btn-primary"><span class="bi-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Search</button>— The output of the above example will look something like this:
Similarly, you can place icons inside the navs, forms, tables, paragraphs or anywhere you want. In the next chapter you will see how to use these icons in Bootstrap nav components.
Note: Remember to leave a space after the closing tag of icon element (i.e. after </i> tag), when using the icons along with the strings of text such as inside buttons or navigation links, to ensure that there is proper spacing between the icon and text.
Using Font Awesome Icons in Bootstrap
You can also use external icon libraries in Bootstrap. One of the most popular and highly compatible external icon library for Bootstrap is Font Awesome. It provides over 675 icons which are available in SVG, PNG, as well as in web font format for better usability and scalability.
You can simply use the freely available font-awesome CDN link to include it in your project. Let’s take a look at the following example to understand how it basically works:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Including Font Awesome Icons in Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1><i class="fa fa-globe"></i> Hello, world!</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>How to Use Font Awesome Icons in Your Code
To use Font Awesome icons in your code you’ll require an <i> tag along with a base class .fa and an individual icon class .fa-*. The general syntax for using font-awesome icons is:
<i class=”fa fa-class-name“></i>
Where class-name is the name of the particular icon class, e.g. search, user, calendar, star, globe, facebook, twitter, and so on. See the list of all Font Awesome icons classes.
For example, you can place font-awesome search icon inside a button like this:
Example
<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>— The output of the above example will look something like this:
Similarly, you can place Font Awesome icons inside the navs, forms, tables, paragraphs, and other components in the same way as you do with Bootstrap icons.
Leave a Reply