How to Add Social Media Icons to Twitter Bootstrap NavBar

One cannot simply overlook social media marketing in creating brand awareness and the need to implement social sharing icons to websites and blogs. Having social signals on prime spots where the site users cannot miss is a challenging task and top navigation menu is one such place in any website. I have already discussed here about using font-awesome icon font to add social network buttons to bootstrap websites. And this bootstrap tutorial will walk you through in easy steps to add customized social media icons to twitter bootstrap navbar.

Add Social Media Icons To Twitter Bootstrap NavBar

To add social network icons to bootstrap navbar (navigation menu) we need some libraries. First download the required libraries used in this bootstrap tutorial.

• Download Bootstrap CSS
• Download Font Awesome Icon Fonts
• Download jQuery Library

Once you have downloaded the files, unzip them and move them to your working folder.

Next you have to include bootstrap, font-awesome and jquery files appropriately in the html file, add some markup and little bit of css styles to start with.

Step-1: Create an html file ‘index.html’ and add the Bootstrap and Font-Awesome css files within the head section of html.

<link href="/path/to/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/path/to/font-awesome.css" rel="stylesheet" type="text/css" />

Step-2: Next add jQuery and Bootstrap javascript files above the closing body tag (</body>) of html.

<script src="/path/to/jquery-1.10.2.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

Step-3: Having all the required css and js files in place now we have to move on to the task of building navigation menu in twitter bootstrap. Add the below html markup to create navigation menu alias navbar in bootstrap.

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">TrendZZ</a>
        </div>
        <!-- menu items -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Mens</a></li>
                <li><a href="#">Womens</a></li>
                <li><a href="#">Kiddies</a></li>
            </ul>
        </div>
    </div>
</nav>

Now open the ‘index.html’ in browser and you will see a navbar component with some menu items on the left side.

Step-4: Now let us add the social network icons for facebook, twitter, google plus and linkedin to the right side of this navbar. We have to use font-awesome brand icons for this purpose. Lets rewrite the <nav> element markup we have added earlier.

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">TrendZZ</a>
        </div>
        <!-- menu items -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Mens</a></li>
                <li><a href="#">Womens</a></li>
                <li><a href="#">Kiddies</a></li>
            </ul>
            <!-- social media icons -->
            <ul class="nav navbar-nav navbar-right social">
                <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
                <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

It’s done!! Now run the html file in browser and you will see nicely scaled little gray colored icons to the right side of the navbar.

Font-Awesome Social Media Icons in Bootstrap Navbar

Here comes the best part of twitter bootstrap library. We haven’t written a single piece of css styles of our own but all the social icons are aligned properly in the bootstrap navbar component.

Wonder how this happened? As discussed many times here in www.kodingmadesimple.com, bootstrap has predefined css styles that makes web development lot easier. Though these social media icons looks great, sure enough we have to write down few additional css styles to fine tune the look and behavior of the icons.

Step-5: Create a css stylesheet with name ‘custom.css’ and link it below the bootstrap and font-awesome files to override css styles.

<link href="/path/to/custom.css" rel="stylesheet" type="text/css" />

Step-6: Next add this below css style to the custom css file.

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #777;
}

Step-7: Now you are okay with the above styles but even though the social icons will turn into dark grey on hover state. Let’s add some spice to it and turn on the social icons color to respective brand colors on mouse hover state. Add these additional css styles to ‘custom.css’.

.social .fa-facebook:hover {
    color: #4060A5;
}

.social .fa-twitter:hover {
    color: #00ABE3;
}

.social .fa-google-plus:hover {
    color: #e64522;
}

.social .fa-linkedin:hover {
    color: #0094BC;
}

Now save the files and refresh ‘index.php’ in the browser and viola...!!

All the social networking icons turn out nicely into their brand colors on hover state.

Font-Awesome Social Media Icons Hover State in Bootstrap Navbar

Complete HTML Markup for index.html

<!DOCTYPE html>
<html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Twitter Bootstrap Social Media Icons to Navbar</title>
    <link href="/path/to/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/path/to/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="/path/to/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- add header -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">TrendZZ</a>
            </div>
            <!-- menu items -->
            <div class="collapse navbar-collapse" id="navbar1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Mens</a></li>
                    <li><a href="#">Womens</a></li>
                    <li><a href="#">Kiddies</a></li>
                </ul>
                <!-- social media icons -->
                <ul class="nav navbar-nav navbar-right social">
                    <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="/path/to/jquery-1.10.2.js"></script>
    <script src="/path/to/bootstrap.min.js"></script>
</body>
</html>

Complete CSS Code for custom.css

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #777;
}

.social .fa-facebook:hover {
    color: #4060A5;
}

.social .fa-twitter:hover {
    color: #00ABE3;
}

.social .fa-google-plus:hover {
    color: #e64522;
}

.social .fa-linkedin:hover {
    color: #0094BC;
}

And that was all about adding social media icons to bootstrap navbar. If you want to use some other brand icons other than the one given here, then check out this font awesome social media icons in bootstrap tutorial as there are more than twenty different social network icons are given.

Recommended Read:

• How to Create Responsive Image Gallery with Lightbox Effect in Bootstrap
• How to Add Search Box with Icon to Twitter Bootstrap Navigation Menu