lipis / bootstrap-social Goto Github PK
View Code? Open in Web Editor NEW:couple: Social Sign-In Buttons for Bootstrap
Home Page: https://lipis.github.io/bootstrap-social/
License: MIT License
:couple: Social Sign-In Buttons for Bootstrap
Home Page: https://lipis.github.io/bootstrap-social/
License: MIT License
Please add a SoundCloud button with the new fa-soundcloud icon introduced in Font Awesome 4.1.0
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}
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,
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.
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
Perhaps you can add it?
I get this error in Codekit, I import bootstrap-social after bootstrap in my main scss file.
Please host on CDN if possible
It used to be here:
http://lipis.github.io/bootstrap-social/bootstrap-social.css
but no more...
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); }
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.
Styling of the buttons are not shown when used along with Bootstrap Material. It just shows a plain button without any styles.
I got this error message at line 10.
A StackExchange login button would be great!
Looking for a pinterest button :)
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.
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/
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)
URL: https://angel.co
Angel list offers Auth Api: https://angel.co/api
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?
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?
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!
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.
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
It would be awesome to have RSS aggregator logins such as feedly, goodreader, minimalreader, etc.
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.
That would be a great addition to a awesome library.
Hello,
We have just add Bootstrap-social to twittstrap resources list
http://www.twittstrap.com/resources/details/bootstrap-social
Under : Components
Regards
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?
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.
Any chance of having this standalone w/o needing to include bootstrap? Thanks!
Hi!
very nice job can you add also login with Amazon button?
Thanks.
L.
Please add a Youtube button with the fa-youtube icon or (alternatively fa-youtube-play)
Please add a Vimeo button with the fa-vimeo-square icon
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);
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
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.
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) !
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.
The fa-adn icon already exists. Only the button missing! I really appreciate this project :)
EDIT: And sorry, it should obviously be btn-adn in the title..
I can see commit with added Pinterest button, but it's not tagged yet, so bower install
command downloads package without this button.
Is there any quick way of putting these is a group and making it spread evenly across a div?
As FontAwsome now has Slideshare, it might be nice to add it to this collection.
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]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.