Add !important to colors about bootstrap-social HOT 6 CLOSED

Can you create a JSFiddle or something with the problem?! I really hate !important and I'm wondering why is that needed..

from bootstrap-social.

You might be importing your custom css file before bootstrap. Make sure you have it last on the list.

from bootstrap-social.

http://jsfiddle.net/DrewCPU/xm5Dr/ has everything loaded and you can see the issue. I find that adding !important to the padding on .btn-social, the white color attributes, and the hover background colors fixed the problem for me. I also moved the color attribute up to .btn-social instead of leaving it for every social network on my site (http://www.mywebwishlist.com).

from bootstrap-social.

In order to fix this problem few !important here and there will just make it more complicated because Bootstrap has many rules that are applied to the <a> of the navbar.

I would suggest you to change the links to <button> and handle them using JS.. by doing that you just need to adjust the width/height of the icon to match the Flatly theme because you're not using the .less files..

Check this example here.. and notice that I have very few changes:
http://jsfiddle.net/xm5Dr/6/

from bootstrap-social.

Just in case you want to avoid using JavaScript for the <button> because I changed from <a> you can wrap it inside a <form> and simulate the normal link like this:

<form action="/login/facebook">  
  <button class="btn btn-block btn-social btn-facebook">
    <i class="fa fa-facebook"></i>
    Sign in with Facebook
  </button>
</form>

The above code is more or less similar to the

<button class="btn btn-block btn-social btn-facebook" href="/login/facebook?">
  <i class="fa fa-facebook"></i>
  Sign in with Facebook
</button>

from bootstrap-social.

That'll work for me. Thanks for all your work on these buttons.

from bootstrap-social.