Bootstrap - Navbar - Icons

   
   
 bootstrap  css  javascript  
 frontend  
Article Series

This article series contain few sections.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Icon set choice for bootstrap navigation bar.

You do not want to make your navigation bar, similar to any other website. So consider a few icons cosmetics.

7: FontAwesome

Bootstrap does not come with any font icon. It takes manual setup.

Official Documentation

Prepare The Head

Consider FontAwesome as CDN in the <head> element.

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" 
          href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
          crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">

Example

Consider this dropdown menu as example

      <ul class="navbar-nav mr-auto">
        <li class="nav-item active dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
             role="button" data-toggle="dropdown" 
             aria-haspopup="true" aria-expanded="false">
            <span class="fa fa-link"></span>&nbsp;Archives
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">
            <span class="fa fa-tags"></span>&nbsp;By Tags</a>
            <a class="dropdown-item" href="#">
            <span class="fa fa-folder"></span>&nbsp;By Category</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">
            <span class="fa fa-calendar"></span>&nbsp;By Chronology</a>
          </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">
          <span class="fas fa-child"></span>&nbsp;About</a>
        </li>
      </ul>

And the expected result will be:

Bootstrap Navigation Bar: FontAwesome in Dropdown Menu

8: Bootstrap Icons

Bootstrap also develop their own Icons. By the time this article written, it is stil in alpha stage. But you can use the icons right away.

The icons use SVG, and this alpha version is bit harder to setup, compared with FontAwesome. It does not have as many icons as FontAwesome, but if you do not need that many icons, Bootstrap Icons can be a good choice.

Official Documentation

Prepare The Icons

I copy the icons that I need and put it somewhere in my assets folder.

❯ tree step-02/assets/icons-bootstrap
step-02/assets/icons-bootstrap
├── archive-fill.svg
├── calendar2-day-fill.svg
├── calendar2-fill.svg
├── folder-fill.svg
├── house-door-fill.svg
├── person-circle.svg
├── person-fill.svg
└── tag-fill.svg

Prepare The Head

Consider this <head> element.

  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">
  <link rel="stylesheet" type="text/css" href="assets/css/icons-bootstrap.css">

And the custom stylesheet would be similar as below.

.icon {
  display: inline-block;
  vertical-align: text-bottom;
  width: 20px;
  height: 20px;

  background-size: 20px 20px;
}

.icon-invert {
  filter: invert(100%) brightness(120%);
}

.archive-fill {
  background: url(../icons-bootstrap/archive-fill.svg) no-repeat;
}
.person-fill { 
  background: url(../icons-bootstrap/person-fill.svg) no-repeat; 
}
.house-door-fill { 
  background: url(../icons-bootstrap/house-door-fill.svg) no-repeat;
}
.tag-fill {
  background: url(../icons-bootstrap/tag-fill.svg) no-repeat;
}
.folder-fill {
  background: url(../icons-bootstrap/folder-fill.svg) no-repeat;
}
.calendar2-day-fill {
  background: url(../icons-bootstrap/calendar2-day-fill.svg) no-repeat;
}

Note that this stylesheet is tailor made, so you can named the class with any name that you like.

Example

Consider this dropdown menu as example

      <ul class="navbar-nav mr-auto">
        <li class="nav-item active dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
             role="button" data-toggle="dropdown" 
             aria-haspopup="true" aria-expanded="false">
            <span class="icon icon-invert archive-fill"></span>&nbsp;Archives
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">
            <span class="icon tag-fill"></span>&nbsp;By Tags</a>
            <a class="dropdown-item" href="#">
            <span class="icon folder-fill"></span>&nbsp;By Category</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">
            <span class="icon calendar2-day-fill"></span>&nbsp;By Chronology</a>
          </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">
          <span class="icon icon-invert person-fill"></span>&nbsp;About</a>
        </li>
      </ul>

And the expected result will be:

Bootstrap Navigation Bar: Bootstrap Icons in Dropdown Menu

9: Feather Icons

Our next example is feather icons. This icon set is also use SVG, but it is loaded by javascript, so this makes things easier for us.

If you do not need a lot of icons, Feather Icons can also be a good choice.

Official Documentation

Prepare The Assets

We need two assets:

  • Javascript from official site: js/feather.min.js

  • Custom Stylesheet: css/icons-feather.css

Prepare The Head

Consider this <head> element.

<head>
  ...

  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">
  <link rel="stylesheet" type="text/css" href="assets/css/icons-feather.css">

  <script src="assets/js/bootstrap-navbar-native.js"></script>
  <script src="assets/js/feather.min.js"></script>
</head>

And the custom stylesheet would be similar as below.

.feather {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  
  vertical-align: text-top;
}

.feather-14 {
  width: 14px;
  height: 14px;
}

Note that the name in this stylesheet is hardcoded.

Prepare The Body

At the bottom of the <body> element.

<body>
  ...

  <script>
    feather.replace()
  </script>
</body>

Example

Consider this dropdown menu as example

      <ul class="navbar-nav mr-auto">
        <li class="nav-item active dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
             role="button" data-toggle="dropdown" 
             aria-haspopup="true" aria-expanded="false">
            <i data-feather="archive"></i>&nbsp;Archives
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">
            <i data-feather="tag"></i>&nbsp;By Tags</a>
            <a class="dropdown-item" href="#">
            <i data-feather="folder"></i>&nbsp;By Category</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">
            <i data-feather="calendar"></i>&nbsp;By Chronology</a>
          </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">
          <i data-feather="user"></i>&nbsp;About</a>
        </li>
      </ul>

And the expected result will be:

Bootstrap Navigation Bar: Feather Icons in Dropdown Menu

What is Next ?

For the rest of the tutorial I will use the light feather icons.

I think that is all, about Navigation Bar variation in Bootstrap.

There is, an introduction about SASS in Bootstrap. Consider continue reading [ Bootstrap - SASS - Introduction ].

Thank you for reading.