图标字体未显示某些图标 [英] Icon font not displaying some icons

问题描述

我有自己的图标字体，所以上面有10个图标.主要问题如下. 其中有8个在网站上可以很好地显示，但有2个的显示方式就像我给他们的字母('f'和'e')

I have my own icon font, so I have 10 icons on it. The main problem is the following. 8 of them display well on the website, but 2 of them are displayed like the letter I gave them ( 'f' and 'e' )

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

For example, this is how I insert my icons

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

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

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

and just 2 of them don't work... this is weirds because the way I insert them is the same, the stylesheet load ok and everything seems fine.

这是它的样子.

这是我通过html插入的方式(名称与原始名称不完全相同，因此我已经检查了所有可能的拼写错误)

This is how I insert via html (the name is not exactly the same as the original, so I have check any posible spelling errors )

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

最后是我如何插入图标字体

And finally how I insert the icon font

@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图标未显示.为什么?

并且codepen仍然是actvia.您可以将代码粘贴在那里，然后查看是否有效

and the codepen is still actvia. You could paste your code there and see that is working

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

我有自己的图标字体，所以上面有10个图标.主要问题如下.其中有8个在网站上可以很好地显示，但有2个的显示方式就像我给他们的字母('f'和'e')

I have my own icon font, so I have 10 icons on it. The main problem is the following. 8 of them display well on the website, but 2 of them are displayed like the letter I gave them ( 'f' and 'e' )

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

For example, this is how I insert my icons

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

这篇关于图标字体未显示某些图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！