Zmiana wyglądu ikon media społecznościowe na karcie produktu

[mxbomba]

Witam!

 

Postanowiłem zmienić ikony społecznościowe na karcie produktu na jakieś bardziej przyzwoite. Dokonałem zmian w pliku socialsharing. css i global.css. Jednak niestety to nie wystarczy:

 

Dokonane zmiany socialsharing.css 

.btn-facebook:hover,
.btn-twitter:hover,
.btn-google-plus:hover,
.btn-pinterest:hover {
  border-color: white; }

.btn-facebook {
  color: white;
  background-color: #435f9f; 
  border-radius: 5px;}
  .btn-facebook i {
    color: white; }
  .btn-facebook:hover {
    border-color: #435f9f;
    background: #fff; }
    .btn-facebook:hover i {
      color: #435f9f; }

.btn-twitter {
  color: white;
  background-color: #00aaf0; 
  border-radius: 5px;}
  .btn-twitter i {
    color: white; }
  .btn-twitter:hover {
    border-color: #00aaf0;
    background: #fff; }
    .btn-twitter:hover i {
      color: #00aaf0; }

.btn-google-plus {
  color: white;
  background-color: #e04b34;
  border-radius: 5px; }  
  .btn-google-plus i {
    color: white; }
  .btn-google-plus:hover {
    border-color: #e04b34;
    background: #fff; }
    .btn-google-plus:hover i {
      color: #e04b34; }

.btn-pinterest {
  color: white;
  background-color: #ce1f21; 
  border-radius: 5px;}
  .btn-pinterest i {
    color: white; }
  .btn-pinterest:hover {
    border-color: #ce1f21;
    background: #fff; }
    .btn-pinterest:hover i {
      color: #ce1f21; }

na

.btn-facebook:hover,
.btn-twitter:hover,
.btn-google-plus:hover,
.btn-pinterest:hover {
  border-color: white; }

.btn-facebook {
  background: #fff;
background-image: URL(http://e-hamaki.pl/PLIKI/Social/facebook.jpg);
background-size: 55px 55px;
  background-repeat: no-repeat;
  width: 55px;
  height:55px;
  }
 
.btn-facebook:hover {
     background: #fff;
background-image: URL(http://e-hamaki.pl/PLIKI/Social/facebook.jpg);
background-size: 55px 55px;
  background-repeat: no-repeat;
  width: 55px;
  height:55px;}
    
.btn-twitter {
  color: white;
  background-color: #00aaf0; 
  border-radius: 5px;}
  .btn-twitter i {
    color: white; }
  .btn-twitter:hover {
    border-color: #00aaf0;
    background: #fff; }
    .btn-twitter:hover i {
      color: #00aaf0; }

.btn-google-plus {
  background:#fff;
  background-image: URL(http://e-hamaki.pl/PLIKI/Social/google_plus.jpg);
  background-size: 55px 55px;
  background-repeat: no-repeat;
  width: 55px;
  height:55px;}  
 
  .btn-google-plus:hover {
    background:#fff;
  background-image: URL(http://e-hamaki.pl/PLIKI/Social/google_plus.jpg);
  background-size: 55px 55px;
  background-repeat: no-repeat;
  width: 55px;
  height:55px; }
    
.btn-pinterest {
  background:#fff;
  background-image: URL(http://e-hamaki.pl/PLIKI/Social/pinterest%20logo.jpg);
  background-size: 55px 55px;
  background-repeat: no-repeat;
  width: 55px;
  height:55px;
  .btn-pinterest:hover {
    background:#fff;
  background-image: URL(http://e-hamaki.pl/PLIKI/Social/pinterest%20logo.jpg);
  background-size: 55px 55px;
  background-repeat: no-repeat;
  width: 55px;
  height:55px;}

W global.css wygląda to praktycznie identycznie. Efekt jaki chciałbym uzyskać znajduje się w załączniku. Poratuje ktoś?