- Home
- Admin
- Dashboard
The Buttons
Sign in with App.net Sign in with Bitbucket Sign in with Dropbox Sign in with Facebook Sign in with Flickr Sign in with Foursquare Sign in with GitHub Sign in with Google Sign in with Instagram Sign in with LinkedIn Sign in with Microsoft Sign in with Odnoklassniki Sign in with OpenID Sign in with Pinterest Sign in with Reddit Sign in with SoundCloud Sign in with Tumblr Sign in with Twitter Sign in with Vimeo Sign in with VK Sign in with Yahoo!Available Classes
btn-adn
#D87A68btn-bitbucket
#205081btn-dropbox
#1087DDbtn-facebook
#3B5998btn-flickr
#2BA9E1btn-foursquare
#f94877btn-github
#444444btn-google
#DD4B39btn-instagram
#3F729Bbtn-linkedin
#007BB6-
btn-microsoft
#2672EC btn-odnoklassniki
#F4731Cbtn-openid
#F7931Ebtn-pinterest
#CB2027btn-reddit
#EFF7FFbtn-soundcloud
#FF5500btn-tumblr
#CB2027btn-twitter
#55ACEEbtn-vimeo
#1AB7EAbtn-vk
#587EA3btn-yahoo
#720E9E
How to use
-
Include Bootstrap and Font Awesome
If you haven't done that already, include the latest Bootstrap and Font Awesome in your project.
-
Include the CSS or Less
You have two options for enabling the social buttons in your project: vanilla CSS or source Less. For vanilla CSS, just include the
bootstrap-social.css
file into your project.For Less, copy the
bootstrap-social.less
into your existing Bootstrap directory and import it intobootstrap.less
via@import "bootstrap-social.less";
. Recompile when ready. -
Add some buttons!
Start using the buttons as you would normally do with the Bootstrap buttons that have an icon by adding the relevant class. For example:
<a class="btn btn-block btn-social btn-twitter"> <span class="fab fa-twitter"></span> Sign in with Twitter </a>
Or if you just want the icon button, use it like this:
<a class="btn btn-social-icon btn-twitter"> <span class="fab fa-twitter"></span> </a>