Learn About Different Icon Fonts in Bootstrap 4

Icon fonts


In this article, we are going to discuss various essential sources for Icon fonts such as Glyphicons font icons which were present in Bootstrap 3, but has been dropped in Bootstrap 4.

Although the Glyphicons have been dropped in Bootstrap 4, one can still use the other options to procure such type of icons. They are the upstream version of Glyphicons, Octicons, Font Awesome, etc. When we use Bootstrap for designing responsive layouts to create mobile and tablet friendly web pages, it creates lots of issues for designers. One of such issue is the use of icons. When we use image icons, there is the problem of improper scaling as the size of the viewport changes and therefore we edit the image to different sizes as per the viewport size with the help of an image editor. Images as an icon require some time to load which delays the loading of the webpage on various devices. Such issues could be overcome with the use of Icon fonts. Most of us were using Glyphicons in Bootstrap 3 which includes around 260 glyphs from the Glyphicon Halflings set, but unfortunately it is not available anymore for use in Bootstrap 4.

Icon fonts have the advantages of scalability, easy manipulation of size, color and shape (CSS modifications) over image icon where we require Photoshop to meet our desired icon shape, size and color. Font Awesome is very essential resource to get icon fonts while working with the Bootstrap.

Font Awesome
It is widely used by Bootstrap web designers as they look great on retina display devices and are compatible with a large number of screen readers. Font Awesome provides us with the scalable vector icons that can instantly be customized in terms of size, color, drop shadow, and anything that can be done with the power of CSS. Font Awesome version 4.7.0 is known to have around 675 icons iconic font to choose from.

Step 1: – Go to the Font Awesome website through this link – http://fontawesome.io/
Step 2: – Click on the http://fontawesome.io/icons/ to view the list of available 675 icons.
Step 3: – Click on the download button as shown below. It will download a package named as ‘font-awesome-4.7.0’.
Font Awesome
Step 4: – Copy the entire font-awesome directory into your project.
Step 5: – In the head of your html, reference the location to your font-awesome.min.css with the following HTML code.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Step 6: – Choose the icon which you want to use from page http://fontawesome.io/icons/ . After clicking on that particular icon you can obtain the HTML code that could be embedded for that particular icon as shown below.
Sample Code

<!DOCTYPE html>
<html lang="en">
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet"
<!-- Bootstrap CSS -->
<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet"
<title>Glyphicons Example 1</title>
	<div class="container">
		<br> <br>
	<table class="table table-bordered"><!-- table class .table-bordered -->
				<th>Icon Category</th>
				<th>Icon Example</th>
				<th scope="row">1</th>
				<td>41 New Icons in 4.7</td>
				<td><i class="fa fa-address-book-o" aria-hidden="true"></i> </td>
				<th scope="row">2</th>
				<td>Web Application Icons</td>
				<td><i class="fa fa-battery-three-quarters" aria-hidden="true"></i></td>
				<th scope="row">3</th>
				<td>Accessibility Icons</td>
				<td><i class="fa fa-volume-control-phone" aria-hidden="true"></i></td>
				<th scope="row">4</th>
				<td>Hand Icons</td>
				<td><i class="fa fa-hand-o-right" aria-hidden="true"></i></td>
				<th scope="row">5</th>
				<td>Transportation Icons</td>
				<td><i class="fa fa-ship" aria-hidden="true"></i></td>
				<th scope="row">6</th>
				<td>Gender Icons</td>
				<td><i class="fa fa-venus-double" aria-hidden="true"></i></td>
				<th scope="row">7</th>
				<td>Spinner Icons</td>
				<td><i class="fa fa-spinner" aria-hidden="true"></i></td>
				<th scope="row">7</th>
				<td>Form Control Icons</td>
				<td><i class="fa fa-plus-square" aria-hidden="true"></i></td>
				<th scope="row">8</th>
				<td>Payment Icons</td>
				<td><i class="fa fa-cc-mastercard" aria-hidden="true"></i></td>
				<th scope="row">9</th>
				<td>Chart Icons</td>
				<td><i class="fa fa-area-chart" aria-hidden="true"></i></td>
				<th scope="row">10</th>
				<td>Currency Icons</td>
				<td><i class="fa fa-inr" aria-hidden="true"></i></td>
				<th scope="row">11</th>
				<td>Text Editor Icons</td>
				<td><i class="fa fa-files-o" aria-hidden="true"></i></td>
				<th scope="row">12</th>
				<td>Directional Icons</td>
				<td><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></td>
				<th scope="row">13</th>
				<td>Video Player Icons</td>
				<td><i class="fa fa-youtube-play" aria-hidden="true"></i></td>
				<th scope="row">14</th>
				<td>Brand Icons</td>
				<td><i class="fa fa-amazon" aria-hidden="true"></i></td>
				<th scope="row">15</th>
				<td>Medical Icons</td>
				<td><i class="fa fa-h-square" aria-hidden="true"></i></td>
		<br> <br>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script src="dist/js/bootstrap.min.js"></script>

Glyphicons - 1
Glyphicons - 2
Other Essential sources are as follows: –

1. Bootstrap Arrows: – It is not exactly an icon font. The Bootstrap Arrows is a simple jQuery plugin and add-on to the Bootstrap framework that includes the use of arrows at any angle in our UI designs for our website.

2. Elusive Icons: – It is a web font to use with any of our Bootstrap projects. When we download this font, then we will also receive all the icons in .svg vector format. Therefore, we can play around them in order to improve and contribute them back on GitHub.

3. Fontello: – It is one of the easiest way to create a custom icon font for a website. Here we need to select the images that we want out of the large collection then download a web font pack to use in our website with just one click.

4. Font Custom: – As the name suggests, we can generate our custom icon web fonts from the comfort of the command line. Font Custom creates styles using Bootstrap’s .icon-{{your-icon-name}} naming convention. We need to include fontcustom.css to work on it.

5. Icon Search: – It is a resource which is used to match user provided tags with the Bootstrap’s built-in icon classes. It has made the life of a web designer much easier to find the appropriate classes for icons. E.g. when we search for the word “message”, then it will provide us the proper classes for the envelope, message and inbox icons.

6. GlyphSearch: – It works similar to that of the icon search, Glyph Search allows us to search for icons from Font Awesome, IcoMoon, Ionicons, Glyphicons, Octicons, etc.

Conclusion: –
In this article, we discussed about various essential sources to procure Icon fonts as Glyphicons has been dropped in Bootstrap 4. We cannot use image icons due to their scaling and loading time issues. Also, it will be difficult to shape, size and color image icons as compared to icon fonts.


Please enter your comment!
Please enter your name here