Social Sign-In Buttons made in pure CSS based on Bootstrap 4 Beta and Font Awesome!
View on GitHub DownloadIf you haven't done that already, include the latest Bootstrap and Font Awesome in your project.
You have two options for enabling the social buttons in your project:
vanilla CSS or source Sass. For vanilla CSS, just include the
bootstrap-social.css
file into your project.
For Sass, copy the bootstrap-social.scss
into
your existing Bootstrap directory and import it into
bootstrap.scss
via
@import "bootstrap-social";
. Recompile when ready.
For Node, you can npm install bootstrap-social
and then
@import "../node_modules/bootstrap-social/bootstrap-social";
.
Note that Lad already comes
pre-bundled with bootstrap-social.
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="fa fa-twitter"></span> Sign in with Twitter </a>
Or if you just want the icon button, use it like this:
<a class="btn btn-twitter"> <span class="fa fa-twitter"></span> </a>