html - Socicon 字体不显示图标，只显示字母

Question

我已经按照网上的步骤操作了，还是无法显示图标。我相信有人在没有正确设置字体路径之前遇到过这个问题。我的道路是正确的，但仍然没有运气。有什么想法吗？

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;
}

Answer 1

不确定您到底做错了什么，但如果您按照这些步骤操作，它应该会起作用。

如您所说，这是您的文件夹结构:

/
fonts/ <-- this is the fonts folder where you have physicallydownloaded the fonts
style.css <-- this is your CSS file
index.html <-- this is your html file

在您的 HTML 文件中，确保您正确调用了 css 文件:

<link rel="stylesheet" type="text/css" href="style.css">

在您的 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;
}

如果这不起作用，很可能是您的文件夹结构不是您描述的那样，因此移动内容或更改对不同文件的引用/调用，您将使其正常工作。