Create Stylish Bootstrap 3 Social Media Icons | How-To Guide

On 11/22/2017

Hi, I’m going to show you how to create bootstrap 3 social media icons without images. Yes! We are going to use an icon font library called Font Awesome. It is a scalable vector icon font which is supported by all modern browsers and IE version of 8 or above. It can be used to add social media buttons (ex., Login with Facebook button) or social media icons for websites without images. Also it’s fully compatible with Twitter Bootstrap 3 and we’ll see how to use it for adding social media icons in bootstrap websites.

Did you see the tiny round social media icons in the above image? Awesome isn’t it? Those are css social media icons without using any images. Also they are fully customizable by their size, color and effects, hence the possibilities are unlimited. All we have to do is style the icons with little bit of css code. Font Awesome is not only limited to bootstrap sites and you can use it on any other types of sites built in html/css websites, wordpress blogs etc. Adding the social media icons for websites not built with bootstrap css framework would be the same as the procedure given in this post.

twitter-bootstrap-3-social-media-icons

Creating Bootstrap 3 Social Media Icons for Websites

First let’s include the required bootstrap and font awesome files. You can download and use them locally or load it directly from CDN, which is recommended. For this tutorial sake, I stick to link them from max cdn. Pretty much like any other css stylesheets, you have to link them within the <head></head> section of the html file.

Here in Koding Made Simple we have constantly discussed about creating css buttons without images and customizing bootstrap framework components. I strongly recommend you to read this post on creating css social media icons using font awesome.

<head>
    <title>Bootstrap 3 Social Media Icons Tutorial</title>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Load Bootstrap css-->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!--load font awesome-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>

Having added the required css files, we’ll insert the social icons into the page with html markup. The font awesome icon classes should be wrapped either inside <i></i> tag or <span></span> tag.

I have given the code for around 20 popular css social media icons and if you want it for some other brands not mentioned here, use it similarly with their corresponding classes. To see the complete list of social media icons available goto http://fontawesome.io and in the top menu select icons >> brand icons.

I’m going to create round social media icons for bootstrap 3 as they are always lucrative. And they will be of medium gray in color with a hover transition to their respective brand colors.

Recommended Read: How to add Search Form to Twitter Bootstrap 3 Navbar

HTML Code for Bootstrap Social Media Icons

Here goes the html code for bootstrap social media icons. Add them in an unordered list.

<div class="social">
    <ul>
        <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-github"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-pinterest"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-flickr"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-vimeo-square"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-stack-overflow"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-dropbox"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-tumblr"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-dribbble"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-skype"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-stack-exchange"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-xing"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-rss"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-foursquare"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-youtube-play"></i></a></li>
    </ul>
</div>

Now we’ll get something like this...

plain-social-media-icons-in-bootstrap-3

Hmm... Not looking good. We have to add css code cleverly to style them.

Recommended Read: How to Create Bootstrap Accordion Menu with Example

CSS Code for Bootstrap Social Media Icons

As we have added the icons in an unordered list, it got stacked one by one as a bulleted list. We have to strip off the bullet points and should align the icons side-by-side with little bit of padding. Here goes it’s css code.

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

Next I’ll change the text & background colors and make it round. Also I’ll apply some mild transition effect for smooth mouse hover.

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}
bootstrap-3-social-media-icons-normal

Now our bootstrap social media buttons are looking really nice. But we are not yet done.

Still all our bootstrap 3 social media icons will be the same old gray color on hover. We have to change their backgrounds to their brand logo colors.

Here goes the css code.

.social .fa-facebook:hover { /* round facebook icon*/
    background: #4060A5;
}

.social .fa-twitter:hover { /* round twitter icon*/
    background: #00ABE3;
}

.social .fa-google-plus:hover { /* round google plus icon*/
    background: #e64522;
}

.social .fa-github:hover { /* round github icon*/
    background: #343434;
}

.social .fa-pinterest:hover { /* round pinterest icon*/
    background: #cb2027;
}

.social .fa-linkedin:hover { /* round linkedin icon*/
    background: #0094BC;
}

.social .fa-flickr:hover { /* round flickr icon*/
    background: #FF57AE;
}

.social .fa-instagram:hover { /* round instagram icon*/
    background: #375989;
}

.social .fa-vimeo-square:hover { /* round vimeo square icon*/
    background: #83DAEB;
}

.social .fa-stack-overflow:hover { /* round stack overflow icon*/
    background: #FEA501;
}

.social .fa-dropbox:hover { /* round dropbox icon*/
    background: #017FE5;
}

.social .fa-tumblr:hover { /* round tumblr icon*/
    background: #3a5876;
}

.social .fa-dribbble:hover { /* round dribble icon*/
    background: #F46899;
}

.social .fa-skype:hover { /* round skype icon*/
    background: #00C6FF;
}

.social .fa-stack-exchange:hover { /* round stack exchange icon*/
    background: #4D86C9;
}

.social .fa-youtube:hover { /* round youtube icon*/
    background: #FF1F25;
}

.social .fa-xing:hover { /* round xing icon*/
    background: #005C5E;
}

.social .fa-rss:hover { /* round rss icon*/
    background: #e88845;
}

.social .fa-foursquare:hover { /* round foursquare icon*/
    background: #09B9E0;
}

.social .fa-youtube-play:hover { /* round youtube play button icon*/
    background: #DF192A;
}

Well. Our social media icons for bootstrap 3 now looks very colorful on mouse hover.

bootstrap-3-social-media-icons-hover

Here is the complete css code for the social media icons style we have created.

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

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

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

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

.social .fa-github:hover {
    background: #343434;
}

.social .fa-pinterest:hover {
    background: #cb2027;
}

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

.social .fa-flickr:hover {
    background: #FF57AE;
}

.social .fa-instagram:hover {
    background: #375989;
}

.social .fa-vimeo-square:hover {
    background: #83DAEB;
}

.social .fa-stack-overflow:hover {
    background: #FEA501;
}

.social .fa-dropbox:hover {
    background: #017FE5;
}

.social .fa-tumblr:hover {
    background: #3a5876;
}

.social .fa-dribbble:hover {
    background: #F46899;
}

.social .fa-skype:hover {
    background: #00C6FF;
}

.social .fa-stack-exchange:hover {
    background: #4D86C9;
}

.social .fa-youtube:hover {
    background: #FF1F25;
}

.social .fa-xing:hover {
    background: #005C5E;
}

.social .fa-rss:hover {
    background: #e88845;
}

.social .fa-foursquare:hover {
    background: #09B9E0;
}

.social .fa-youtube-play:hover {
    background: #DF192A;
}

Just note the above list of social media icons includes css code for 20 different social networks. Now don’t get excited and line up all these icons in your websites/blogs. Remember to use only the networks in which you are popular. Less is always good.

Also Read: 5 Free Black and White Social Media Icons Sets using CSS and HTML

Final Word

Although you can add social icons anywhere on the website, it will be best if you place these social media icons on bootstrap top navigation bar, footer, side bar or on contact page. Choice is yours.

Related Read: How to Add Social Media Icons to Twitter Bootstrap Top NavBar

Make use of these stylish bootstrap 3 social media icons cleverly and power up your websites and blogs. Find this tutorial helpful? I would appreciate if you return me the favor and share it in your circle :)

23 comments:

  1. you could complete your tutorial showing how to add these buttons in a hidden sidebar, and when the user passes the mouse over the lateral of the page, this sidebar get displayed. thanks

    ReplyDelete
  2. These are awesome, I'm adding them to pawnstocker.com. Thanks!

    ReplyDelete
  3. Hello,

    Thanks a lot for this tutorial. It would be great if you could update it for font-awesome 4.30 :)

    Take Care

    ReplyDelete
    Replies
    1. Great you liked it...and thanks for your suggestion too..!! :)

      Delete
  4. I can't view icons on my page. I added all what you say, but nothing have to see...

    ReplyDelete
    Replies
    1. Hi, can you show me the code you tried out. It perfectly works here and font awesome lib needs compatible browser to show up the icons. Please make sure your browser version supports it.

      http://fortawesome.github.io/Font-Awesome/get-started/

      Also do check this article which explains exactly placing social media icons (from font awesome) in bootstrap navbar.
      http://www.kodingmadesimple.com/2015/06/social-media-icons-twitter-bootstrap-navbar.html

      Hope this helps.
      Cheers.

      Delete
  5. These icons Not Compatible in Chrome what i do for that Issue

    ReplyDelete
    Replies
    1. Hi, please upgrade to latest chrome version if you haven't already. It works for me!

      Cheers.

      Delete
  6. This was awesome! Exactly the magic I was looking for thanks!

    ReplyDelete
  7. Awesome! This was exactly the magic I was looking for. Thanks!

    ReplyDelete
  8. This post is very important and useful for new blogger.


    My site https://buyreallike.com/

    ReplyDelete
  9. Nimble Social CRM adds Rapportive-like contact widgets to its social CRM service for Gmail, Hootsuite, and Outlook. Ken Yeung by Ken Yeung Tweet,,,so plzzz check this site

    ReplyDelete
  10. The share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
    red ball 4 | hola launcher | cooking fever | paradise bay | agario

    ReplyDelete
  11. Pretty nice contents you have shared thanks for your effort i get what i need good post keep it up

    ReplyDelete
  12. very nice contents you have shared thanks for sharing such a useful info

    ReplyDelete
  13. THANKYOU SO MUCH, BEAUTIFUL POST!

    ReplyDelete
  14. Great icons check it out @
    http://www.kippee.com

    ReplyDelete

  15. Wow. cool post. I’d like to write like this too – taking time and real hard work to make a great article… but I put things off too much and never seem to get started. Thanks though.
    super smash flash 2
    bloons tower defense 5

    ReplyDelete

Contact Form

Name

Email *

Message *