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> Archives
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">
<span class="fa fa-tags"></span> By Tags</a>
<a class="dropdown-item" href="#">
<span class="fa fa-folder"></span> By Category</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="fa fa-calendar"></span> By Chronology</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">
<span class="fas fa-child"></span> About</a>
</li>
</ul>
And the expected result will be:
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> Archives
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">
<span class="icon tag-fill"></span> By Tags</a>
<a class="dropdown-item" href="#">
<span class="icon folder-fill"></span> By Category</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="icon calendar2-day-fill"></span> By Chronology</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">
<span class="icon icon-invert person-fill"></span> About</a>
</li>
</ul>
And the expected result will be:
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> Archives
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">
<i data-feather="tag"></i> By Tags</a>
<a class="dropdown-item" href="#">
<i data-feather="folder"></i> By Category</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i data-feather="calendar"></i> By Chronology</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">
<i data-feather="user"></i> About</a>
</li>
</ul>
And the expected result will be:
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.