Bootstrap Social Icons: Pure CSS Icons and Buttons

Today I’ll present you a new set of Bootstrap Social Icons that I’ve created lately and I hope will help you save some time in your next projects. These icons are pure CSS, with no use of images, and ready to integrate in your next Bootstrap project.

The icon set is a combination of the Bootstrap framework, Font Awesome and some custom CSS for the colors, shapes and effects. A lot of shapes, gradients and types of shadows (using CSS3 properties) are already included and I’ll continue to add new ones from time to time.

If you need you can customize these icons very easily from the CSS code, maybe change the colors or add a new effect. Also being vectors, they can be scaled at any size without losing quality (ideal for Retina displays). So, take a look below to learn how to use them, see a live preview and download them. Enjoy!

You might also like:

Bootstrap Icons: The Best Free Font Icons to Use with Bootstrap

How to use the Bootstrap Social Icon Set

First download the package from the link below, extract it and add it to your project.

Include the Bootstrap CSS file in your project. Here is how I’ve included it in the example/demo file:

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

Include the Font Awesome CSS file in your project. Here is how I’ve included it:

<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">

Include the custom CSS in your project. You can include the “style.css” file of this package, or you can open the file and copy only the part of the code you need. This way you don’t include unnecessary code in your project.

<link rel="stylesheet" href="assets/css/style.css">

In the example file “index.html” I’ve used the Open Sans font for the text parts:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700">

You can use your preferred font in your project.

In the example you can see some different icon shapes, sizes, gradients, shadows and effects. I’ve used a combination of some CSS classes to control the icon properties.

Below you’ll see some preview images showing different icon effects, the HTML code and CSS classes used for that effect. You can see these classes (and play with them) from the “style.css” file.

Rounded Square Flat

Rounded square flat social icons, 48 x 48 pixels:

Icons HTML code:

<a href="#" class="btn azm-social azm-size-48 azm-r-square azm-android"><i class="fa fa-android"></i></a>

Circle Long Shadow

Circle social icons with long shadows, 64 x 64 pixels:

Icons HTML code:

<a href="#" class="btn azm-social azm-size-64 azm-circle azm-long-shadow azm-dribbble"><i class="fa fa-dribbble"></i></a>

Text Buttons, Border Bottom

Social text buttons with bottom border:

Icons HTML code:

<a href="#" class="btn azm-social azm-btn azm-border-bottom azm-facebook"><i class="fa fa-facebook"></i> Log in with Facebook</a>

Text Buttons, Pill Shape, Bottom Shadow

Social text buttons with pill / capsule shapes and bottom shadows:

Icons HTML code:

<a href="#" class="btn azm-social azm-btn azm-pill azm-shadow-bottom azm-twitter"><i class="fa fa-twitter"></i> Sign in with Twitter</a>

Demo, Download and License

LIVE PREVIEW

DOWNLOAD: Bootstrap Social Icons (11752 downloads)

LICENSE:

You can use these social icons and buttons in personal and commercial projects, but please don’t sell or distribute them directly, as your own. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

ICONS INCLUDED:

Android, Apple, Behance, Bitcoin, BuySellAds, CodePen, CCS3, Delicious, DeviantArt, Digg, Dribbble, Dropbox, Drupal, Email 1, Email 2, Facebook, Flickr, Foursquare, Git, GitHub, Google, Google Plus, HTML5, Instagram, Joomla, JSFiddle, Last.fm, LinkedIn, Linux, MaxCDN, Medium, PageLines, PayPal, Pinterest, Reddit, RSS, Share, Skype, SlideShare, SoundCloud, Spotify, Stack Exchange, Stack Overflow, StumbleUpon, Trello, Tumblr, Twitter, Vimeo, Vine, VK, WhatsApp, Windows, WordPress, XING, Yahoo, Yelp, YouTube, YouTube Play.

Conclusion

That’s all. Here you have a nice set of Social Icons and Buttons for Bootstrap, ready to use, pure CSS3, compatible with all modern browsers, that will save you some time. If you have any question or you want to show me some icon effect or style that you think I should include here, just let me know.