图标字体不显示一些图标

Question

我有自己的图标字体，所以我有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;
}

Answer 1

这是答案。

FontAwesome icons not showing. Why?

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

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

我有自己的图标字体，所以我有10个图标。主要问题如下。其中8个在网站上显示得很好，但其中2个显示的字样就像我给他们的字母一样（＆＃39; f＆＃39;和＆＃39; e＆＃39;）

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

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

Answer 2

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

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