BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Icons

In this tutorial you will learn how to use icons in Bootstrap.

Using Icons in Bootstrap 4

The new Bootstrap 4 version doesn't include an icon library by default, unlike the previous Bootstrap 3 version that includes Glyphicons in the font format in its core.

However, you can still include icons in your project using several external font based icon library. The most popular and highly compatible icon library for Bootstrap is Font Awesome. It provides 675 icons which are available in font format for better usability and scalability.

The advantage of using font icons is, you can create icons of any color just through applying the CSS color property. Let's see how to include font-awesome icons in a web page.

How to Include Font Awesome

You can simply use the freely available font-awesome CDN link to include the font-awesome icons in your project. This CDN link basically points to a remote CSS file that includes all the necessary classes to generate variety of icons. Let's take a look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Including Font Awesome in Bootstrap Template</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <h1><i class="fa fa-globe"></i> Hello, world!</h1>
    <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></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 fa-class-name is the name of the particular icon class (e.g. fa-search, fa-user, fa-star, fa-calendar, fa-globe, etc.) defined in font-awesome.min.css file.

For example, to use search icon you can place the following code just about anywhere:

<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 icons inside the headings, paragraphs, tables, 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 proper spacing between the icon and text.

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.