In this chapter, we will learn how to use CSS to create navigation bar icons.
The icon resource uses Font Awesome version 4.7 icons.
You can refer to the Font Awesome icon tutorial:Font Awesome Icons
You can directly import a third-party CDN library:
<link rel="stylesheet" href="../cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
Basic HTML Code
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
Horizontal Navigation Bar
Example
.icon-bar {
width: 100%; /*Full width*/
background-color: #555; /*Set background*/
overflow: auto; /*Overflow is adjusted according to the float*/
}
.icon-bar a {
float: left; /*Display elements next to each other horizontally*/
text-align: center; /*Center text*/
width: 20%; /*Equal-width display (5 buttons, each displaying 20%, 20% * 5 = 100%)*/
padding: 12px 0; /*Set the top and bottom padding*/
transition: all 0.3s ease; /*Add a transition effect for the hover effect*/
color: white; /*Display text in white*/
font-size: 36px; /*Increase font size*/
}
.icon-bar a:hover {
background-color: #000; /*Add a background color when the mouse moves over the element*/
}
.active {
background-color: #0457AA; /*Add a background color for the selected element*/
}
Try it yourself »
Vertical Navigation Bar
Example
.icon-bar {
width: 90px; /*Specify width*/
background-color: #555; /*Set background*/
}
.icon-bar a {
display: block; /*Make links appear below each other instead of side by side*/
text-align: center; /*Center text*/
padding: 16px; /*Set padding*/
transition: all 0.3s ease; /*Add a transition effect for the hover effect*/
color: white; /*White text*/
font-size: 36px; /*Increase font size*/
}
.icon-bar a:hover {
background-color: #000; /*Add a background color when the mouse moves over the element*/
}
.active {
background-color: #0457AA; /*Add a background color for the selected element*/
}
Try it yourself »