图标字体不显示一些图标

Posted 2021-05-04

我有自己的图标字体，所以我有10个图标。主要问题如下。其中8个在网站上显示良好，但其中2个显示为我给他们的字母（'f'和'e'）

例如，这是我插入图标的方式

.test-icon-user1：在{content：“ 61”;}之前 .test-icon-user2：在{content：“ 62”;}之前 .test-icon-user3：在{content：“ 63”;}之前 .test-icon-user4：在{content：“ 64”;}之前 .test-icon-user5：在{content：“ 65”;}之前 .test-icon-user6：在{content：“ 66”;}之前 .test-icon-user7：在{content：“ 67”;}之前

并且其中只有2个不起作用...这很奇怪，因为我插入它们的方式是相同的，样式表加载正常，一切似乎都很好。

这就是它的样子。

这是我通过html插入的方式（名称与原始名称不完全相同，所以我检查了任何可能的拼写错误）

<a id="sticky-login-toggle" class="test-icon-user1 sticky-toggle"></a>

最后我如何插入图标字体

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

}

[class^="icon-"]:before,
[class*=" test-icon-"]:before {
  font-family: "test" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

答案

这是答案。

FontAwesome icons not showing. Why?

并且codepen仍然是actvia。您可以将代码粘贴到那里，看看它是否正常工作

http://codepen.io/TheNathanG/pen/xbyFg

我有自己的图标字体，所以我有10个图标。主要问题如下。其中8个在网站上显示良好，但其中2个显示为我给他们的字母（'f'和'e'）

例如，这是我插入图标的方式

.test-icon-user1:before {content: "61";}
.test-icon-user2:before {content: "62";}
.test-icon-user3:before {content: "63";}
.test-icon-user4:before {content: "64";}
.test-icon-user5:before {content: "65";}
.test-icon-user6:before {content: "66";}
.test-icon-user7:before {content: "67";}

另一答案

我遇到了同样的问题。我使用fontastic创建我的自定义图标字体，当我将文件推送到实时测试服务器时 - 图标显示为字符映射字母。我终于弄明白这是一个文件权限问题。

请务必检查您的实时网站（或测试网站）上的文件权限以查找字体文件夹和css文件 - 我必须调整字体文件夹，css文件和字体文件的权限 - 否则我收到了一个禁止的错误我的控制台试图访问字体文件，它只会显示一个字母。