horizontal icon bar vertical icon bar


Horizontal Icon Bar

In this article we create Horizontal Icon Bar using HTML and CSS. In this menu we use icons. So we use Font Awesome's Icon.

If you want to create menu like this click on the Try It button to get full code in our editor. You can also customize this code.

Horizontal Icon Bar | WebQuests

Step 1 : Add this Code in your HTML File.


HTML Code Explain

Before creating this menu please Add icon library in head tag. After Adding icon library, You need to create a <div>. Here we create a <div> with icon-bar class name. Under this <div> we create <a> tag and put Font Awesome Icon.

Step 2 : Add this Code in your CSS File.


In the CSS Code we set Default values under *. Here we set our Default value margin: 0; and padding: 0;

Under the class icon-bar we set width: 100% and line-height: 80px; After setting it we gave 25% width to every <a> because here we have only 4 <a> you can also use width: calc(100% / 4). If you have 5 <a> than put 5 in place of 4.

Note: width: calc(100% / No. of <a>)