Preface
Step Three: Icon set choice for bootstrap navigation bar using FontAwesome.
Bootstrap does not come with any font icon. It takes manual setup. You do not want to make your navigation bar, similar to any other website. So consider a few icons cosmetics.
Prior to reading this article, it is recommended that you read the preceding article.
1: Chapter Overview
Consider examine the directory structure.
Source Code: Step-03
To obtain the source code for this chapter, please follow the link provided below:
Bootstrap v4
The obsolete Bootstrap v4 article series is also available.
While this bootstrap 5 article,
give example of FontAwesome
and Bootstrap Icons
.
The bootstrap 4 article also include Feather Icon
.
Plain HTML
Compiled HTML Document
The static files generated by the Nunjucks templates is shown as below:
❯ ls *.html
031-navbar-awesome.html 034-navbar-ibs-svg.html
032-navbar-ibs-css.html 036-sidebar-awesome.html
033-navbar-ibs-cdn.html 037-sidebar-ibs-svg.html
Templates
Nunjucks
We have only three common templates:
- Base Layout,
- Meta Head, and
- Navbar Button
Layout
Reusable Parent Template
This is the skeleton for the building block.
<!DOCTYPE html>
<html>
<head>
{% block htmlhead %}
{% endblock %}
</head>
<body>
{% block navbar %}
{% endblock %}
{% block sidebar %}
{% endblock %}
</body>
</html>
Meta
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>Should you decide to accept.</title>
Navbar Button
<button type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
2: Navbar: Font Awesome
This FontAwesome is still the most popular Icons.
Official Documentation
Using Icon Set
Using FontAwesome is as simple as this below:
<span class="fa fa-home"></span>
For a real world example, you can examine this section below.
Assets
CSS, JS, Images, SVGs
assets
├── css
│ └── bootstrap.css
├── images
│ └── logo-gear.png
└── js
├── bootstrap.min.js
└── popper.min.js
Templates
Nunjucks
views
├── 031-navbar-awesome.njk
├── heads
│ ├── 030-meta.njk
│ └── 031-links.njk
├── layouts
│ └── base.njk
└── shared
├── 031-navbar-collapse.njk
├── 031-navbar-dropdown.njk
├── 031-navbar.njk
└── navbar-button.njk
Blocks
Nunjucks Document Source
{% extends './layouts/base.njk' %}
{% block htmlhead %}
{% include './heads/030-meta.njk' %}
{% include './heads/031-links.njk' %}
{% endblock %}
{% block navbar %}
{% include './shared/031-navbar.njk' %}
{% endblock %}
HTML Head
Assets: Resource Links
Consider FontAwesome as CDN in the <head>
element.
<link rel="stylesheet" type="text/css"
href="assets/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">
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
Navigation Bar
<nav class="navbar navbar-expand-sm navbar-dark
fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand ms-4" href="#">
<img src="assets/images/logo-gear.png"
alt="Home" width="32" height="32"/>
</a>
{% include './navbar-button.njk' %}
{% include './031-navbar-collapse.njk' %}
</div>
</nav>
Navbar: Collapsible
<div class="collapse navbar-collapse"
id="navbarCollapse">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#">
<span class="fa fa-home"></span>
Blog <span class="visually-hidden"
>(current)</span></a>
</li>
<li class="nav-item dropdown">
{% include './031-navbar-dropdown.njk' %}
</li>
<li class="nav-item">
<a class="nav-link active" href="#">
<span class="fas fa-child"></span>
About</a>
</li>
</ul>
<form class="d-flex form-inline mt-2 mt-md-0
d-sm-none d-md-flex">
<input class="form-control mr-sm-2" type="text"
placeholder="Search"
aria-label="Search" role="search">
<button class="btn btn-outline-light my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
Navbar: Dropdown
Consider this dropdown menu as example
<a href="#"
class="nav-link active dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false">
<span class="fa fa-link"></span>
Archives</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
<span class="fa fa-tags"></span>
By Tags</a></li>
<li><a class="dropdown-item" href="#">
<span class="fa fa-folder"></span>
By Category</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">
<span class="fa fa-calendar"></span>
By Chronology</a></li>
</ul>
Browser Preview
Screenshot
And the expected result will vary beetween these two.
Using sm
size for landscape tablet phone.
Using xs
size portrait tablet phone.
Static Page
HTML Document Target
As usual, you can examine the generated HTML output.
What is Next 🤔?
We are done with FontAwesome, we need to explore Bootstrap Icons.
Consider continue reading [ Bootstrap - Navbar - Icons ].