Toolbar icons not working properly?

Hi... agian,
Geez, sorry for the flood of problems lately, but I'm such a noob.  
SO, I tried to change the toolbar icons, but as usually, I must have messed up something.
In the end, I changed so many things, they don't work and 2 icons can be seen for 1 button at the same time.  


Codes I use:

JS:

CSS:

Any tips to make them work properly?
In addition, could a hover effect be added to them? http://ianlunn.github.io/Hover/ (Radial In - (#23799c))

Thanks in advance!  

Hey
The problem of multiple picture was that you added image to default buttons again via JavaScript. That shouldn't be done since there is already image before.
So replace the JS by this

Js:

And for the CSS, you need to use

Code: !important

to override the default image.
So use this

css:

Apply these codes and let me know if you need any help with positioning.

Thanks, but now apart from the Pinterest and Reddit icons all of them are gone. 

Oops I forgot to reposition the background image XD

Add this in your CSS

Code:

#fa_fb {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/fbi_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_twitter {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/twiti_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_gp {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/gpu_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_mail {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/emil_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_rss {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/rss_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}

Thank you! But something is still not okay, because the icons are not there. 

I have to say your forum's code are very messed. This rule is lying somewhere in your forum index that is over writing the css

Code:

#fa_twitter {
    background-position: -90px 0px;
}

I really suggest you to try and clean codes up.

But for now, you have to create a java script that will over write that rule, so go to
ACP > Modules > JavaScript Management > Create new
Tick in all pages

Code:

$(function() {
  $(document.body).append('<style>#fa_fb, #fa_twitter, #fa_gp, #fa_mail, #fa_rss {background-postition: 0px!important;}</style>');
});

this SHOULD fix it.

Sorry for the troubles!!!  Ya, I'm having a hard time finding things in the codes too, and tried to remove the unnecessary parts, but seems like many remained.  However, the thing you mentioned is nowhere in the codes. At least I cannot find them. And bad news... the JS didn't fix the problem. 

Replace the script by this

Code:

$(function() {
  $(document.body).append('<style>#fa_fb, #fa_twitter, #fa_gp, #fa_mail, #fa_rss {background-position: 0px!important;}</style>');
});

 
It's working!! Thank you so much!!
Can I bother you with the second question?

In addition, could a hover effect be added to them? http://ianlunn.github.io/Hover/ (Radial In - (#23799c))

Or I had better be satisfied with the result and give up on the hover effect?

So you want on hover it to become from pink to #23799c with radial in effect?
If so I think you need to make the background of the image you're using to transparent.

Yup, I wanted that. I thought you can have an effect that overwrites the color? 
Nevermind, I changed my mind, and don't want the effect. It would be too much.  

Thanks for your help and time Rhino!  

lol well whatever you wish XD
Glad to be of help

Thanks for the help Rhino!

Topic solved and archived ~ brandon_g

Happy holidays .