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

如果这不起作用，很可能你的文件夹结构不是你描述的方式，所以移动东西或改变对不同文件的引用/调用，你就可以使它工作。

Answer 2

使用wordpress时，我遇到了与socicon字体相同的问题。这就是我能够使用socicon字体的方式：
1.从www.socicon.com下载字体（socicon.zip） 2.提取zip文件夹。复制提取的文件夹，名为'socicon，并粘贴到文件夹“wp-content / theme / theme_name_here / ... pasted_SOCICON_folder_here ...”中 3.修改了style.css（wp-content / theme / theme_name_here / style.css）补充一点：@import url（'socicon / socicon.css'）;
4.最后，在我的wp帖子中使用了字体，例如：

<span style="font-family: socicon; color: skyblue; font-size: 20px;">a</span><a href="http://www.twitter.com/RenShres1"> twitter</a>
<br>
<span style="font-family: socicon; color: blue; font-size: 20px;">b</span><a href="http://www.facebook.com/link.to.ren"> facebook</a>

干杯：）

[我是新来的，所以我不知道如何发布代码......]

Answer 3

几年后我遇到了同样的问题，我解决了。下载文件后。我的CSS：

ngDoCheck() {
this.FetchUsersInQueue(this.commonService.getUser());
}
onSignin() {
this.serverService.LoginMobileUser(this.modelSignIn).subscribe(data => { }, error => { }); 
}

然后使用它：

<style>
   @font-face {
      font-family: 'Socicon';
       src: url("../fonts/Socicon.woff?6abp0d") format('woff');
       font-weight: normal;
       font-style: normal;
    }
</style>

您可以从font site获取代码。当然，这只是一个示例，将其放在CSS文件中，并使用CSS类作为最佳实践规则。

Socicon字体不显示图标，只是字母

3 个答案: