Icon font not displaying some icons

问题

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

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.

This is how it look like.

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

回答1:

Here is the answer.

FontAwesome icons not showing. Why?

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

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

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

回答2:

I was having the same issue. I used fontastic to create my custom icon font and when pushing my files to a live test server - the icons were showing up as the character map letters. I finally figured out it was a file permission issue.

Be sure to check the file permissions on your live site (or test site) for your font folder and css files - I had to tweak the permission for the font folder, css file, and font files - otherwise I was getting a forbidden error in my console trying to access the font files and it would just show a letter instead.

来源：https://stackoverflow.com/questions/35807601/icon-font-not-displaying-some-icons

标签

css

fonts

icons