Социальные кнопки - Вопросы по CSS

…
<li>
<a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a>
</li>
…
CSS
Подключаем шрифт
@font-face{font-family:'FontAwesome';src:url('fonts/fontawesome-webfont.eot?v=4.2.0')
…
Прописываем значение
.fa-twitter-square:before{content:"\f081"}
.fa-facebook-square:before{content:"\f082"}

@font-face {
    font-family: 'si';
    src: url('PATH_TO/socicon.eot');
...

<ul class="soc">
    <li><a class="soc-twitter" href="#"></a></li>
...