How to Add Social Media Icons to Twitter Bootstrap NavBar

On 6/03/2015

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.

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.

twitter-bootstrap-3-social-media-icons-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.

twitter-bootstrap-3-social-media-icons-hover-navbar
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:

12 comments:

  1. Hi, what if I want class="nav navbar-nav" on the right side as icons too, but before icons on left?
    Have you any advise for that?

    ReplyDelete
    Replies
    1. Hi! You have to include "navbar-right" to the unordered list of menus to pull it to the right side. If you want it present before the social icons, then place the menus after the icons list.

      Hope that helps :)

      Cheers.

      Delete
  2. what if i want to add this to a header which only has a logo and search form

    ReplyDelete
    Replies
    1. Then you can leave the ul element section containing menu items. Instead simply add the search form in the place.

      Look at this page to know about adding search form to bootstrap navbar. http://www.kodingmadesimple.com/2015/04/twitter-bootstrap-search-box-icon-navbar.html

      Cheers.

      Delete
  3. I'm having trouble with the links. I put them in the nav and they don't go ot the link but I also used the same concept for the social buttons in my footer and they work fine.

    ReplyDelete
  4. I'm having trouble with the links. I put them in the nav and they don't go ot the link but I also used the same concept for the social buttons in my footer and they work fine.

    ReplyDelete
    Replies
    1. Hi, they are simple anchor links and it's difficult to say why you have trouble without seeing the code. Can you provide the code you are trying?

      Cheers.

      Delete
  5. Do you have a version of this tutorial for Bootstrap 4?

    ReplyDelete
    Replies
    1. No! Between Bootstrap 4 is still in alpha phase and the support for glyphicons has been dropped in v4. But this tutorial uses only font awesome for social icons which works in bootstrap 4.

      Hope this helps. Please let me know if you face any issues.

      Cheers.

      Delete
  6. my friend... this is not responsive...

    ReplyDelete
  7. When I resize my browser window to mobile size display, the icons line up vertically, each icon taking up a new row. How do I resolve this Valli?

    ReplyDelete
  8. Hey what if i want to show social icons on right top and then below i want navigation on right side?

    ReplyDelete

Contact Form

Name

Email *

Message *