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?
Available glyphs Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
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:
<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>
<i class="fab fa-youtube"></i>
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With