Easy Tutorial
❮ Javascript Css Accordion Android Tutorial Webview ❯

CSS Navigation Bar Icons

Category Programming Techniques

In this section, we will learn how to create navigation bar icons using CSS.

The icon resources use the icons from Font Awesome version 4.7.

For a tutorial on Font Awesome icons, you can refer to: Font Awesome Icons

You can directly include a third-party CDN library:

<link rel="stylesheet" href="https://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 screen width */
  background-color: #555; /* Set background */
  overflow: auto; /* Overflow adjusts based on floating */
}

.icon-bar a {
  float: left; /* Display elements side by side horizontally */
  text-align: center; /* Center text */
  width: 20%; /* Equal width display (5 buttons, each showing 20%, 20% * 5 = 100%) */
  padding: 12px 0; /* Set top and bottom padding */
  transition: all 0.3s ease; /* Add transition effect for hover */
  color: white; /* Display text in white */
  font-size: 36px; /* Increase font size */
}

.icon-bar a:hover {
  background-color: #000; /* Add background color for mouseover */
}

.active {
  background-color: #04AA6D; /* Add background color for the selected element */
}

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 transition effect for hover */
  color: white; /* Display text in white */
  font-size: 36px; /* Increase font size */
}

.icon-bar a:hover {
  background-color: #000; /* Add background color for mouseover */
}

.active {
  background-color: #04AA6D; /* Add background color for the selected element */
}

Related Articles

CSS Navigation Bar

Font Awesome Icons

** Share My Notes

Cancel

-

-

-

❮ Javascript Css Accordion Android Tutorial Webview ❯