Social buttons using Twitter Bootstrap 3

Question

I'm trying to add some social buttons to my website, the styling is correct but the icons aren't appearing. I assume this must be an issue with Font Awesome as that's where the icons come from but I can't see where I've gone wrong.

I linked it in the head like so:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

and the buttons in the body like so:

<div id="contact_page">
  <div class="container">
    <div class="row">
      <div class="span4 pull-center">
        <button class="btn btn-twitter"><i class="icon-twitter"></i> | Connect with Twitter</button><br>
        <button class="btn btn-linkedin"><i class="icon-linkedin"></i> | Connect with LinkedIn</button><br>
      </div>
    </div>
  </div> 
</div>

Solution 1

Since you're trying to use the Font Awesome 4.0.3 then you'll have to use the latest class names to have it right. Instead of icon-* you'll have to use the fa fa-* (more changes in the official examples)

In your case change the <i> to:

<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>

If you want to have something more advanced than just an icon and a simple separator you could check the Social Buttons for Bootstrap (Disclaimer: I'm the creator) which works nicely with the latest versions and it's very flexible if you want to add more.

Solution 2

Probably you don't have these classes.

Check this: Social buttons for Bootstrap

or this example: Social media icons with font awesome