lipis/bootstrap-social

:couple: Social Sign-In Buttons for Bootstrap

Social Buttons for Bootstrap

Social Buttons made in pure CSS based on Bootstrap and Font Awesome!

Check the live demo!

Installation

Include the bootstrap-social.css or bootstrap-social.less in your project, or install it through Bower:

bower install bootstrap-social

Available classes

• btn-adn
• btn-bitbucket
• btn-dropbox
• btn-facebook
• btn-flickr
• btn-foursquare
• btn-github
• btn-google
• btn-instagram
• btn-linkedin
• btn-microsoft
• btn-odnoklassniki
• btn-openid
• btn-pinterest
• btn-reddit
• btn-soundcloud
• btn-tumblr
• btn-twitter
• btn-vimeo
• btn-vk
• btn-yahoo

Examples

<a class="btn btn-block btn-social btn-twitter">
  <span class="fa fa-twitter"></span>
  Sign in with Twitter
</a>

<a class="btn btn-social-icon btn-twitter">
  <span class="fa fa-twitter"></span>
</a>

Notes

For now I won't accept any request for new buttons as I'm planning to split the main CSS to have separate files for all of the requested ones.

bootstrap-social's Issues

Issue with mobile Chrome's 'Reduce data usage'

Chrome's 'Reduce data usage' option breaks the CSS of bootstrap-social. Chrome is removing a space from .btn-social-icon :first-child selector, checkout this SO issue.

I've fixed it by adding a child selector everywhere where :first-child is used, it became

> :first-child

Maybe it would make sense to make this change in the main lib itself? I think, it would make bootstrap-social more stable.

CDN

Please host on CDN if possible

Issue with spin icons

If put some spin icon instead of social icon (e.g. after button is clicked), right border of icon is rotating with the icon.

[a class="btn btn-block btn-social btn-facebook"]
[i class="fa fa-spinner fa-spin"][/i] Sign in with Facebook
[/a]

Bower font-awesome shouldn't be required

Currently you have font-awesome as a requirement when installing bootstrap-social using bower. However bootstrap-social will also work nicely with any other icon set like Socicon or Elusive icons.

Please put font-awesome in the devDependencies section intead.

Slideshare might be nice

As FontAwsome now has Slideshare, it might be nice to add it to this collection.

Npm repository is old

Hello,

There's a npm repository in the npmjs.org

https://www.npmjs.com/package/bootstrap-social

I don't know if this is official and maintained by you or not, but if it is official, could you please take time to update this? If not, are there any plans to add this to npm as official repository?

Thanks in advance,

Styling not present with Bootstrap Material

Styling of the buttons are not shown when used along with Bootstrap Material. It just shows a plain button without any styles.

https://github.com/FezVrasta/bootstrap-material-design

Styling errors

Hi, I've added bootstrap and font awesome, and added bootstrap-social.css from the root of the repo. I then added the example HTML, and got this:

Am I using the wrong .css file? I didn't see a /css folder as instructed in step 2 of http://lipis.github.io/bootstrap-social/

button-variant compile issue

I've added the less file file to my project but I'm having issues compiling:

SyntaxError: .button-variant is undefined in client_src\css_core\social-buttons.less on line 94, column 22:

Any suggestions?

Request: pinterest

Looking for a pinterest button :)

Request: Salesforce

https://login.salesforce.com/

Add !important to colors

Can !important be added to all of the color and background-color attributes? I place the social buttons into navbar dropdowns and the colors are getting overridden by the Bootstrap CSS, but adding !important seems to fix the issue.

Request: Steam

Not so much the sign in, but a button that matches the theme of the others would be nice for linking my steam profile on my website :D

download failed: fontawesome-webfont.ttf

Probably not a bootstrap-social issue, but...
When I test locally, I have no issue.
After deploying (to gh-pages), social icons are not rendered because fontawesome web fonts were not uploaded...
Any hint about the grunt config for this small issue?

Foursquare button has to be updated.

The logo and colors of Foursquare were changed.
Their mobile applications are already updated.

https://ru.foursquare.com/about/logos

Foursquare Brand Guide PDF — https://playfoursquare.s3.amazonaws.com/press/foursquare-brandguide.pdf

Primary colors (order preserved as it is in pdf):
FS Watermelon — #F94877
FS Navy — #0732A2
FS Blue — #2D5BE3

Logo EPS:
https://playfoursquare.s3.amazonaws.com/press/2014/foursquare-logomark.eps
https://playfoursquare.s3.amazonaws.com/press/2014/foursquare-logomark-white.eps

As I understood from the PDF, you should use either FS Watermelon (#F94877) backround and white logo, or white/light gray backround and FS Watermelon (#F94877) logo.

See FortAwesome/Font-Awesome#4077 for the new logo request.

Implementation w/o Requiring Bootstrap

Any chance of having this standalone w/o needing to include bootstrap? Thanks!

Social sharecount number support?

Hey!

Thank you for your awesome job!

Please do you plan to add support for the share count number? Something like this, but nicer:)

Thank you!

does not pass csslint

Running bootstrap-social through csslint fails on

border-right: 1px solid rgba(0, 0, 0, 0.2);
border-color: rgba(0, 0, 0, 0.2);

There is no fallback for rgba. S/B

border-right: 1px solid rgb(0, 0, 0);
border-right: 1px solid rgba(0, 0, 0, 0.2);

Add css for Youtube btn

Hi, Here is the css to add the button youtube, convert it into less ;)

.btn-youtube{color:#fff;background-color:#DC2725;border-color:rgba(0,0,0,0.2)}.btn-youtube:hover,.btn-youtube:focus,.btn-youtube:active,.btn-youtube.active,.open>.dropdown-toggle.btn-youtube{color:#fff;background-color:#B21E1C;border-color:rgba(0,0,0,0.2)}
.btn-youtube:active,.btn-youtube.active,.open>.dropdown-toggle.btn-youtube{background-image:none}
.btn-youtube.disabled,.btn-youtube[disabled],fieldset[disabled] .btn-youtube,.btn-youtube.disabled:hover,.btn-youtube[disabled]:hover,fieldset[disabled] .btn-youtube:hover,.btn-youtube.disabled:focus,.btn-youtube[disabled]:focus,fieldset[disabled] .btn-youtube:focus,.btn-youtube.disabled:active,.btn-youtube[disabled]:active,fieldset[disabled] .btn-youtube:active,.btn-youtube.disabled.active,.btn-youtube[disabled].active,fieldset[disabled] .btn-youtube.active{background-color:#DC2725;border-color:rgba(0,0,0,0.2)}
.btn-youtube .badge{color:#DC2725;background-color:#fff}

For less

.btn-youtube { .btn-social(#DC2725); }

Add Angellist button

URL: https://angel.co
Angel list offers Auth Api: https://angel.co/api

Problems with Bootstrap 3

Shadows and background images cause UI problems in Bootstrap 3.

You can add the line to get the desired appearance:

.btn{text-shadow:none;background-image:none;-webkit-box-shadow:none;box-shadow:none}

social-adn

The fa-adn icon already exists. Only the button missing! I really appreciate this project :)

www.app.net

EDIT: And sorry, it should obviously be btn-adn in the title..

Add whatsapp button

btn-youtube

Please add a Youtube button with the fa-youtube icon or (alternatively fa-youtube-play)

Undefined variable: "$bs-height-base"

I get this error in Codekit, I import bootstrap-social after bootstrap in my main scss file.

.btn-pseudo-states doesn't exists

In bootstrap3 doesn't exists the mixin .btn-pseudo-states() (line 20 on bootstrap-social-3.less) that's why the console throws an error to at moment to compile the file bootstrap-social-3.less, so it seems to me that it right to use .button-variant() instead of .btn-pseudo-states().

good library (y) !

request: Spotify

font-awesome already has a Spotify icon, you just need to add the color: #6ab233

Button color from: https://developer.spotify.com/download/guidelines/ux-with-other-brands.pdf
(You'll have to convert the green to HEX to verify)

Bootstrap-social added to twitstrap resources

Hello,
We have just add Bootstrap-social to twittstrap resources list
http://www.twittstrap.com/resources/details/bootstrap-social
Under : Components
Regards

request: twitch.tv

twitch.tv

Bootstrap Social Buttons issue with Bootstrap Split Button Drop Downs

Using the split button drop down example provided by bootstrap:
http://getbootstrap.com/components/#btn-dropdowns-split

split portion of drop down is not displayed properly when setting the class of both buttons in the bootstrap example to:

"btn btn-block btn-social btn-facebook".

or other combinations of css classes with the two buttons. I did not see any css for btn-group within your bootstrap-social.css.

this would be great if your project was fully usable with bootstrap.

Thanks for keeping up this cool project.

Amazon Login button

Hi!
very nice job can you add also login with Amazon button?
Thanks.
L.

Why is Font Awesome a dev dependency?

Sass support

Hello!

I am trying to use your library for angular-fullstack/generator-angular-fullstack#640
but I cannot find any sass version. Is there any sass fork?

Thank you for your help!

Best regards,
Andrej

Adblocker filters bootstrap-social

Just for info:
unfourtunately, Adblock filters bootstrap-social:
https://easylist-downloads.adblockplus.org/fanboy-social.txt

Is there a way to prevent this?

Best, Thomas

btn-google-plus disappeared :)

It used to be here:
http://lipis.github.io/bootstrap-social/bootstrap-social.css
but no more...

btn-vimeo

Please add a Vimeo button with the fa-vimeo-square icon

Google / google-plus

i propose using the adding google class to the css.
Just the same as google-plus but with other nbame because mostly google is set as the provider and not google plus.

New release with Pinterest button included

I can see commit with added Pinterest button, but it's not tagged yet, so bower install command downloads package without this button.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of lipis/bootstrap-social!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library lipis/bootstrap-social is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "lipis/bootstrap-social",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

FourSquare is missing

Perhaps you can add it?

Composer package

I'd like to suggest you bundle Bootstrap Social as a package for Composer & submit it to Packagist.

The process is as simple as creating a composer.json file & submitting the GitHub URL on Packagist. If you also authorise Packagist in the GitHub project settings then your updates to Bootstrap Social automagically go to Packagist.

An example of a web assets package bundled like this is metisMenu, & on Packagist.

With Bootstrap Social bundled like this, any developer who declares it as a dependancy has it updated any time they run composer update on their project.

Lanyrd Icon

Brilliant work!

Any chance of a lanyrd (http://lanyrd.com/) icon? It's the one that's always missing from a font kit/ web font.

Add StackExchange login button

A StackExchange login button would be great!

Gravatar icon add request

That would be a great addition to a awesome library.

SCSS support

I was able to convert bootstrap-social from LESS to SCSS without too much pain. It's exactly the same number of LoC.

Would you like me to send a PR or are you planning to keep it css and LESS only?

Request: RSS Aggregators

It would be awesome to have RSS aggregator logins such as feedly, goodreader, minimalreader, etc.

Justified buttons

Is there any quick way of putting these is a group and making it spread evenly across a div?

request: DISQUS

http://opauth.org/

Uncaught SyntaxError: Unexpected token .

I got this error message at line 10.

btn-soundcloud

Please add a SoundCloud button with the new fa-soundcloud icon introduced in Font Awesome 4.1.0