html - Socicon字体未与@ font-face一起显示

我想在标题中使用名为socicon（http://socicon.com/）的字体，而不是使用.png的社交图标。因此，我可以更容易和快速的风格我的图标。
所以我遵循了socicon网站上的说明，下面是我的代码示例
//HTML格式

<section class="social">
                <ul>
                    <li><div class="container"><a href="https://twitter.com/xxx" target="_blank" class="icon" id="twitter">a</a></div></li>
                    <li><div class="container"><a href="https://www.linkedin.com/pub/xxx" target="_blank" class="icon" id="linkedin">j</a></div></li>
                    <li><div class="container"><a href="https://www.facebook.com/xxx" target="_blank" class="icon" id="facebook">b</a></div></li>
                </ul>
            </section>

//CSS

@font-face {
font-family: 'socicon';
src: url('fonts/socicon-webfont.eot');
src: url('fonts/socicon-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/socicon-webfont.woff') format('woff'),
     url('fonts/socicon-webfont.ttf') format('truetype'),
     url('fonts/socicon-webfont.svg#sociconregular') format('svg');
font-weight: normal;
font-style: normal;
}

.icon {
color: #ffffff;
font-family: 'socicon' !important;
font-size: 28px;
text-decoration: none;
position: absolute;
top: 1%;
padding-left: 17px;
padding-right: 17px;
padding-top: 30px;
padding-bottom: 60px;
transition: all .4s linear;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
-ms-transition: all .4s linear;
}

但字母a，j，b却一直出现，而不是想要的图标。我尝试在我的操作系统中安装字体，然后显示图标，但一旦字体不在系统上，@font face调用似乎就不起作用。
我遗漏了什么吗？

最佳答案

src必须包括../fonts/而不仅仅是fonts/。后者适用于html，但显然不适用于css。