Miałem to samo. U mnie pomogło stworzenie nowego pliku css i tam wrzucenie kodu. A wszystkie pliki wrzuciłem do folderu PATH_TO :D
@font-face {
font-family: 'si';
src: url('PATH_TO/socicon.eot');
src: url('PATH_TO/socicon.eot?#iefix') format('embedded-opentype'),
url('PATH_TO/socicon.woff') format('woff'),
url('PATH_TO/socicon.ttf') format('truetype'),
url('PATH_TO/socicon.svg#icomoonregular') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family:si;
src: url(PATH_TO/socicon.svg) format(svg);
}
}
.soc {
overflow:hidden;
margin:0; padding:0;
list-style:none;
}
.soc li {
display:inline-block;
*display:inline;
zoom:1;
}
.soc li a {
font-family:si!important;
font-style:normal;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-o-transition:.1s;
-ms-transition:.1s;
-moz-transition:.1s;
-webkit-transition:.1s;
transition:.1s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
overflow:hidden;
text-decoration:none;
text-align:center;
display:block;
position: relative;
z-index: 1;
width: 52px;
height: 52px;
line-height: 52px;
font-size: 28px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
margin-right: 25px;
color: #ffffff;
background-color: none;
}
.soc a:hover {
z-index: 2;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.soc-icon-last{
margin:0 !important;
}
.soc-facebook {
background-color: #3e5b98;
}
.soc-facebook:before {
content:'b';
}
.soc-twitter {
background-color: #4da7de;
}
.soc-twitter:before {
content:'a';
}
.soc-instagram {
background-color: #9c7c6e;
}
.soc-instagram:before {
content:'x';
}
.soc-soundcloud {
background-color: #fe3801;
}
.soc-soundcloud:before {
content:'n';
}