Where to Discuss?

Local Group

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.

Bootstrap5: Qutebrowser: Navigation Bar: FontAwesome

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

Bootstrap5: Directory Structure: Compiled

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>

Bootstrap5: Nunjucks: Base Layout: Parent Template

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>

Bootstrap5: Nunjucks: Heads: Meta

      <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>

Bootstrap5: Nunjucks: Shared: Navbar: 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 %}

Bootstrap5: Nunjucks: Blocks: Navigation Bar: FontAwesome

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>

Bootstrap5: Nunjucks: Heads: Links

  <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>

Bootstrap5: Nunjucks: Blocks: Navigation Bar

<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>
        &nbsp;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>
        &nbsp;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">
    &nbsp;
    <button class="btn btn-outline-light my-2 my-sm-0"
      type="submit">Search</button>
  </form>

</div>

Bootstrap5: Nunjucks: Blocks: Navigation Bar

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>
        &nbsp;Archives</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">
          <span class="fa fa-tags"></span>
          &nbsp;By Tags</a></li>
        <li><a class="dropdown-item" href="#">
          <span class="fa fa-folder"></span>
          &nbsp;By Category</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">
          <span class="fa fa-calendar"></span>
          &nbsp;By Chronology</a></li>
      </ul>

Bootstrap5: Nunjucks: Blocks: Navigation Bar

Browser Preview

Screenshot

And the expected result will vary beetween these two.

Using sm size for landscape tablet phone.

Bootstrap5: Qutebrowser: Navigation Bar: FontAwesome

Using xs size portrait tablet phone.

Bootstrap5: Qutebrowser: Navigation Bar: FontAwesome

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 ].