15

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?

3 Answers 3

56

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:

enter image description here

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>
Sign up to request clarification or add additional context in comments.

5 Comments

But,will the above glyphicon format,work for Bootstrap framework?
@user3620928, most definitely! Font Awesome was built with the bootstrap framework in mind, and has backward compatibility with glyphicons. For a while glyphicons were not even shipped with Bootstrap. They're back now, but most bootstrappers I know prefer FA.
fontawseome has lot of issue showing in some browsers ad not showing in some, especially IOS safari and chrome
Note that with Font Awesome 5 the Brands icons should use the fab class rather than the fa class so it should now be <i class="fab fa-youtube"></i>
@MikePoole, thanks Mike. I elaborated on the different versions of FA and BS a little to help expand on the updates since the point in time of the original answer
21

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/

Comments

0

If using font-awesome 5 the classes have changed.

Now you have more prefixes than just fa: fab, fas, far, fal.

To show the twitter logo for instance you need something like this

<i class="fab fa-twitter"></i>.

You can read more about migrating from font-awesome 4 to 5 here.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.