Bootstrap Icon
An icon is a small picture that transmits information in pictorial form. It can be used in any section of websites(header, footer, or body). There are hundreds of icons available on bootstrap.
Icons in Bootstrap 3
- Bootstrap 3 used Glyphicons to embed icons in the webpage.
- There are over 250 Glyphicons in font format from the Glyphicon Halflings set.
- It is not available for free but their creator made it free for Bootstrap.
Syntax of BootStrap Icons
The following is the syntax of bootstrap icons.
<span class="glyphicon glyphicon-name"></span>
To use this in the HTML, replace the name with the Glyphicon name from the list.
Example: Adding Glyphicon using Bootstrap 3
In this example, we added different types of Glyphicon by using their classes. See the example below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 >Glyphicon List </h2>
<span class="glyphicon glyphicon-envelope"> used for message icon.</span><br>
<span class="glyphicon glyphicon-search"> Used for searching icon</span><br>
<span class="glyphicon glyphicon-print">Used for print icon</span><br>
<span class="glyphicon glyphicon-music">Used for music icon</span><br>
</div>
</body>
</html>
Output:
Here is the output showing some Glyphicon.
Icons in Bootstrap 4
Bootstrap 4 does not support Glyphicons which was supported in its previous version. Further, it does not have its own library of icons. So it provides support of many free icon libraries like Font Awesome, Feather, and Octicons.
Let us take an example to add icons in bootstrap 4 using external libraries. We will be using Font Awesome to add icons in bootstrap.
- To add icons from Font Awesome add the following CSS in the HTML page.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
- Now we can use any icon from Font Awesome. Add icon name with HTML <i> or <span> tag.
Example: Adding icons using Bootstrap 4
Here, we used font awesome to add icons in Bootstrap4. See we used classes such as fas fa-cloud, fa-cofee etc.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head>
<body>
<div class="container">
<h2>Icons in Bootstrap 4:</h2>
<p>Cloud icon : <i class="fas fa-cloud"></i></p>
<br>
<p> Coffee icon : <i class="fas fa-coffee"></i> </p>
<br>
<p> Car icon : <i class="fas fa-car"></i></p>
<br>
<p> File icon : <i class="fas fa-file"></i></p>
<br>
<p> Bar icon : <i class="fas fa-bars"></i></p>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Icons in Bootstrap 5
Bootstrap 5 comes with its own library of icons. Bootstrap icon library has over 1,300 icons. It provides high-quality icons. It can be included in SVGs, SVG sprite, or web fonts.
There are three different ways to install Bootstrap icons.
- npm - Install Bootstrap icons using npm which includes SVGs, icon sprite, and icon fonts. To install Bootstrap icons via npm use
$ npm i bootstrap-icons
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
or
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");
Example: Adding icons using Bootstrap 5
Here, we embedded icons of Bootstrap 5 into the HTML page. Go to the bootstrap icon document page. Click on the icon you want to use. Copy the SVG path from there and paste it into your program as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 icon </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
</head>
<body>
<h2> Icon in Bootstrap 5 </h2>
<svg xmlns="http://www.w3.org/2000/svg" width="10em" height="10em" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16">
<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
</svg>
</body>
</html>
Output:
Here is the output of the above program.
Example: Changing the color of an icon
To change the color of the icon simply add CSS color to the icon.
Example: Changing color of an icon using Bootstrap
Here we have used CSS to change the icon color to red.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap icon </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
</head>
<style>
body {
color: red
}
</style>
<body>
<h2> Icon in Bootstrap 5 </h2>
<svg xmlns="http://www.w3.org/2000/svg" width="10em" height="10em" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16">
<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
</svg>
</body>
</html>
Output:
Adding contextual color to icon
Example: Adding contextual color to icons using Bootstrap
To add contextual color add .text-info to the class field. You can use any other contextual class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap icon </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
</head>
<body>
<h2> Icon in Bootstrap 5 </h2>
<svg xmlns="http://www.w3.org/2000/svg"
width="10em"
height="10em"
fill="currentColor"
class="bi bi-mic-fill text-info"
viewBox="0 0 16 16">
<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
</svg>
</body>
</html>
Output:
Conclusion
Here we learned how to use icons in different versions of bootstrap. so embed icons to a web page to make pictorial representation better.
