How to use icons in Bootstrap projects?

In Bootstrap 3, we may use glyph icons that are included as part of Bootstrap. It does not require adding any external links or library (CDN links) to be used in your projects. So, by adding the reference of Bootstrap, you could use the Glyph icons.

In Bootstrap version 4, it does not include any icon library; Bootstrap has dropped the Glyph icons. However, Bootstrap has some recommendations for external icon libraries that you may use in Bootstrap 4 based projects.

In this tutorial, I am going to share you a few third party icon libraries and online examples of using icons in various components like buttons.

The external libraries offer a number of formats that you may use, however, Bootstrap recommends and prefers using SVG implementation for accessibility and external support.

1- Open Iconic – A free and open icon set

Bootstrap has tested and used the Open Iconic themselves and this is on the preferred list recommended by Bootstrap.

How to use iconic icons?

Include the CDN link in the <head> section after the reference of Bootstrap 4 CSS file:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.0/font/css/open-iconic-bootstrap.min.css” />

You may also download the iconic CSS file from the official website and host at your own.

After that, use the <span> tag for inline placement of an icon as follows:

<span class=”oi oi-data-transfer-download”>

You need to replace the name of the icon by the one you are intended to use. The list of the icons can be seen on the Iconic website (see above link). Select any icon and get the code for Bootstrap as shown below:

Bootstrap iconic icons

An example of using iconic icons in Bootstrap 4

In this example, four icons of the Iconic library are used. Two are placed in the buttons and the two in the <div> tag with text.

As said earlier, the icon markup is placed in the <span> tag, though you may use other tags as well. Have a look at the output and code:

Bootstrap iconic button

See online demo and code

The markup of this demo:

You can see, the icon adapts the color of containing element. For example, the .btn-outline-primary class is used for the first button and the color of the icon is also blue.

Creating various sized icons example

Just like the color of icons based on buttons in above example, the size of the icons is also adapted as per the containing element. See the following example where I used three sizes of buttons with various Iconic icons:

Bootstrap iconic sizes

See online demo and code

The markup:

2- Using Google Material Icons

The second cool icon library on our list is Google Material Icons. It is a big icon library that you may easily use in your Bootstrap 4 based projects.

Just like the Iconic, you may include the CDN link for the Material Icon library into your web page and use the markup with icon code wherever you require it.

The material icons are not only usable in websites but also in Android and iOS projects.

An example of using Material Icons in BS 4 buttons

See the following example where I used Google Material Icons with a few buttons. Large, normal and small sized buttons are created and material icon markup is used to attach icons as shown in the demo below:

Bootstrap material icons

See online demo and code

The example code:

For using the material icons on your web pages, you need to include the Google web fonts as follows:

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>

There are other ways of installing the Material Icons as well e.g. self-hosted. For setting up material icons, read this guide.

The next step is using the markup in the place where you intend to display the icons. In the example, I used camera icon as follows:

<i class=”material-icons”>camera_enhance</i>

You may get the code of any icon by visiting the website and click on any icon that you require. A blue bar should display in the bottom where you can see < > ICON FONT caption. Click this and it will display the code that you may copy on your web page as shown below:

Bootstrap material setup

Using icons with links example

You may use icons with various components in Bootstrap. For example, using in form fields, links or simple text, navbar etc.

The example below shows using an icon of Material library with a link:

Bootstrap material link

See online demo and code

The code:

<div><a href=”https://www.jquery-az.com” class=”text-primary”>Tutorials Home<i class=”material-icons”>launch</i></a></div>

3- Using ionicons in Bootstrap

The ionicons is also a big icons library that you may easily use in your projects based on Bootstrap. All you need to do is referring the CDN link or host the CSS at your own for ionicons library and use the icon code in a tag like <span> element.

The CDN link for ionicons:

http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

An example of using ionicons in buttons

The following example shows using ionicons in buttons and a link.

Bootstrap ionicons

See online demo and code

The markup for this example:

See the complete code with output in the example page.

4- The font awesome icons

The font-awesome is one of the most popular icons libraries around. Although, this is not listed in the Bootstrap’s official website for recommended (tested or untested) list yet this is used widely.

This is a big library of icons where you may access the code of specific icon by clicking on any icon and going into its detail page. The icon code generally looks like this:

<i class=”fa fa-calendar” aria-hidden=”true”>

Using font-awesome icon library is also pretty simple in your websites.

The CDN of the font-awesome icons library:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

You may learn more about font-awesome accessibility options here.

The example of using font-awesome icons

Almost in all examples, I used the buttons for demonstrating how to use icons for certain library. This is because it is simple to explain and learn while you may apply the icon code in various elements easily.

For font-awesome icons, I am using buttons again for demonstrating how to use it. See the demo online with code where I used different styles of buttons including .outline class with font-awesome icons:

Bootstrap font awesome

See online demo and code

The example code:

Bootstrap social icons example with font-awesome

The following example shows using the social icons (Facebook, Twitter, Google Plus, Linkedin, etc.) by using the font-awesome library. Again, the buttons are used for displaying the icons:

Bootstrap font awesome social

See online demo and code

The code:

5- Using Feather Icons in Bootstrap 4

The feather is also an open source collection of icons that are designed with an emphasis on readability, simplicity, and consistency.

You may see the collection of icons by visiting their website by above link. With each icon, the code is given that you may use in your web page like this:

<i data-feather=”facebook”></i>

Unlike the class used in most above cases, you will use the data-feather attribute and the icon name in the markup.

You also require either hosting the feather.js file at your own or use the CDN link as given below:

Minified version:

<script src=”https://unpkg.com/feather-icons/dist/feather.min.js”></script>

Or

<script src=”https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js”></script>

An example of using Feather Icons

In this example, eight various icons including social icons (Facebook, Twitter, Linkedin) are used from the Feather icons library. Have a look at the code and the output:

Bootstrap feather icon

See online demo and code

The markup:

A little JavaScript is also required:

That is it!