Create a smart navigation menu with font-awesome icons

Planning on developing a navigation bar with icons? Thanks to font awesome, you don’t need images to get it done . You can achieve that with the truly awesome Font-Awesome and you can take it even further by making it smart with a little jQuery function. I’ll try to keep it as simple as possible.

  1. Create your navigation bar and place the tabs in the other that you desire.
       <div id="nav-bar">
            <ul>
            <li ><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blog</a></li>
            <ul>    
        </div><!-- End Nav Bar -->
    
  2. Enqueue or add the 2 lines of code below to the header of your website
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    
  3. Now go to FontAwesome Bootstrap Cheat-sheet, find the FontAwesome CSS content values of your desired icons and copy them.
  4. Copy and paste the block of CSS code below and for each “content:’’ value, insert the correct value. Refer to the FontAwesome CSS content values you obtained from FontAwesome Bootstrap Cheat-sheet.
    #nav-bar {
    width: 80%;
    height: 40px;
    margin: 50px 0 0 50px;
    background-color: #333;
    padding: 20px 0 20px 0;
    }
    
    #nav-bar ul li {
        display: inline-block;   
        margin: 10px;
        text-align: center;
        position: reelative; /* relative value holds the icon within the LI */
        width:20%;
        height: 100%;
        font-size: 18px;
    }
    
    #nav-bar ul li a {
       color: white;
       text-decoration: none;
    }
    
    #nav-bar ul li:before {    
        font-family: 'FontAwesome';
        padding:0 10px 0 15px;   
        color: white;
        font-size: 18px;
    }
    .home:before {
        content: ''; /* outputs your chosen icon for the Home tab */    
    }
    .services:before {
        content:''; /* outputs your chosen icon for the Services tab */       
    }
    .blog:before {
        content:'';   /* outputs your chosen icon for the Blog tab */    
    }
    

    If we assign the classes above manually, the icons will show but that isn’t smart. That isn’t smart because if someone re-shuffles the link text, you’ll have the wrong icons in the wrong places.

  5. To make it a smart navigation, add the jQuery function below to the head section of your website or to your external jQuery file.
  6. // You can expand the function as needed
     jQuery(document).ready(function() {      
    $("#nav-bar ul li:contains('Home')").addClass('home');  
    $("#nav-bar ul li:contains('Services')").addClass('services');  
    $("#nav-bar ul li:contains('Blog')").addClass('blog');
     });
    

    The above function checks for “LI” that contains a given value and adds the specified class to it. The class in turn displays the appropriate icon. This way; the tab’s text will still have the correct icons even when they’re re-shuffled.

      Note:

      1. Element specification is of great importance so we don’t have icons wherever there’s an “LI”
      2. “Contains” property value is case sensitive

      That’s it, our navigation is now smart enough to find a tab’s text and assign a defined class that outputs the icon equivalent. If you know how to make it smarter, please share.

      See working and editable example here

      If you encounter any problem, let me know and I’d be glad to help you. Comments are appreciated.

      Leave a Reply