Colorful Navigation With Icons

by sanaullah Rais

HTML

<!-- Add this HTML in your website where you want to show Colorful Navigation With Icons -->

<nav class="menu-navigation-icons">
    <a href="#" class="menu-magenta"><i class="fa fa-camera-retro"></i><span>Pictures</span></a>
    <a href="#" class="menu-blue"><i class="fa fa-code"></i><span>Code</span></a>
    <a href="#" class="menu-green"><i class="fa fa-comment"></i><span>Talks</span></a>
    <a href="#" class="menu-yellow"><i class="fa fa-plane"></i><span>Travel</span></a>
    <a href="#" class="menu-red"><i class="fa fa-heart"></i><span>Favorites</span></a>
</nav>

CSS

<!-- Add this hosted CSS above </head> in your website or custom download source code -->

 <link rel="stylesheet" href="http://demo.tutorialzine.com/2015/05/4-sweet-responsive-navigation-menus/assets/navigation-icons.css">

 <link rel="stylesheet" href="http://demo.tutorialzine.com/2015/05/4-sweet-responsive-navigation-menus/assets/slicknav/slicknav.min.css">

<!-- MaxCDN Bootstrap Icon to show in menu -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

JavaScript

<!-- Add this javascript above </body> in your website -->

<!-- If jQuery 2.1.1 is already install in your website then ignore this script -->
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Colorful Menu Script -->

<script src="http://demo.tutorialzine.com/2015/05/4-sweet-responsive-navigation-menus/assets/slicknav/jquery.slicknav.min.js"></script>

<script>
    $(function(){
        $('.menu-navigation-icons').slicknav();
    });
</script>