flat menu main

Navigation Menu with HTML and CSS- Flat Icon style

In this article, I am going to show you how to implement a flat-icon style navigation menu in your HTML. You don’t have to use it as a menu, technically you can create “buttons” by following the same tutorial as well. It’s a fairly simple tutorial for those new to Cascade Style Sheets (CSS).

I will also introduce you to the process of implementing FontAwesome Icons. If you’ve never used FontAwesome before, it offers a completely free icon-set available to everyone, and it’s very easy to utilize on your website. For this tutorial, you may need prior HTML & CSS experience, but I will try to explain things as best as possible for newbies. You should be able to follow along, nonetheless, if you have any programming experience.

Create Flat Icon Navigation Menu

The flat-icon style navigation menu that we will create will look like this:


The text only shows when “hovering” over icons

Notice that the navigation’s icons are off to the side–this was done on purpose, however you can easily center the icons by adjusting the CSS file we will be creating.

Continue reading