How to use social glyphicons in bootstrap implemented web page?

Question

I'm not able to use social media glyph-icons in bootstrap implemented web page. I was able to use the usual ones like search, globe and many more.

This is how I used the usual ones:

<span class="glyphicons glyphicons-search"></span>

How can you implement the above method for the social glyphicons?

Answer 1

The glyphicons that come free with Bootstrap 3 is a subset of the full paid Glyphicons library and doesn't include the social media icons set.

Instead, you can use Font Awesome, a free alternative that is fully supported (and the preferred icon kit in Bootstrap 4), which has a free brand icon set:

Font Awesome Version 4 - Brands - Demo in jsFiddle & Stack Snippets:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-bitbucket"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-github"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-steam"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-vine"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-youtube"></i>



<style type="text/css">
  .fa {
    padding: 4px;
    width: 200px;
  }

  .fa::before {
    display: inline-block;
    /* .fa-fw */
    width: 1.28571429em;
    text-align: center;
  }

  .fa::after {
    content: attr(class);
    font-family: consolas, monospace;
    font-size: 15px;
    /* .code */
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    margin-left: 5px;
  }
</style>

For Font Awesome 5, you can still use brands with the separate brands bundle:

<i class="fab fa-youtube"></i>

Answer 2

paste this in your code's head part

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

and just an example for inserting facebook icon

<i class="fa fa-facebook"></i>

For the whole list of glyph-icons, visit https://fortawesome.github.io/Font-Awesome/icons/