How to override facebook share button css - html

Question

How do i override facebook shaer button css ?
Is that any way to change the sharebutton css ?
I am using asp.net and i want to change or override the facebook share button css how do i do it ?
.sp_plugin-button {
background-image: url("https://fbstatic-a.akamaihd.net/rsrc.php/v2/y1/r/LVx-xkvaJ0b.png");
background-repeat: no-repeat;
background-size: auto auto;
display: inline-block;
height: 14px;
width: 14px;
}
How do i change the image of that share button i have override this class but not worked..

Answer 1

You can create one like this using Font Awesome as the unique dependency:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css
HTML
<div class="facebook-share">
<i class="fa fa-facebook-square"></i> <span>Share</span>
<div>
CSS
.facebook-share {
background-color: #3b5998;
border-radius: 3px;
height: 20px;
width: 66px;
color: white;
padding: 0 0 1px 4px;
font-family: "Lucida Grande", "Tahoma", "Helvetica", "Roboto";
font-size: 18px;
}
.facebook-share span {
font-size: 14px;
}
Here is the fiddle:
http://jsfiddle.net/yu8j5bny/

Answer 2

If you're referring to this button: https://developers.facebook.com/docs/plugins/share-button/
All you have to do is target the same classes that Facebook is styling to override them.
Example:
This is what Facebook is styling
.pluginCountButton {
color: #6A7180;
font-size: 11px;
line-height: 18px;
text-align: center;
white-space: nowrap;
}
override with something like:
.pluginCountButton {
color: #000;
font-size: 16px;
}
Edit: I see you've updated your question with m ore details. Facebook is using a sprite, so they are also setting the background position:
.sx_plugin-button_favblue {
background-position: 0 -42px;
}
You need to override that too.
Edit 2:
Do this:
.sp_plugin-button {
background-image: url("YourImagePathHere");
}
.sx_plugin-button_favblue {
background-position: 0 0;
}