Icon font not displaying some icons

Question

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

Why is your icon font not set up to have the glyphs in PUA, with GSUB rules to substitute the icon's name for that PUA codepoint? Right now your icon font's pretending to be a Latin font while absolutely not being one. — Mike 'Pomax' Kamermans, Mar 05 '16 at 00:30
Sorry but I don't undertand that. Could you explained me please, maybe that could be the solution — Lester Vargas, Mar 06 '16 at 18:28
fonts have two sets of glyphs: real glyphs, for real languages, and then a Private Use Area for "these shapes have nothing to do with actual languages or unicode etc." so if you make a proper icon font, you make sure the font stores all those icons as Private Use Area shapes, and then you add GSUB substitution rules, where you tell the font "if you are asked to shape the word 'smiley', instead render the icon in PUA spot 12" or something. What did you make your font in? — Mike 'Pomax' Kamermans, Mar 06 '16 at 19:02
I uploaded my fonts via FONTASTIC, so I just download it and apply the rules they set... so 8 of 10 icons displayed well, but the other 2 are shown like the picture above :/ — Lester Vargas, Mar 06 '16 at 19:43
this might be something worth asking FONTASTIC, then, rather than on stackoverflow, since you didn't make the font yourself. There are too many things that could be going on that we'd be guessing at, and only FONTASTIC will know. — Mike 'Pomax' Kamermans, Mar 06 '16 at 19:57

score 3 · Accepted Answer · edited Dec 30 '17 at 07:09

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

score 0 · Answer 2 · answered Jul 14 '17 at 14:15

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.

score 0 · Answer 3 · answered Mar 18 '23 at 11:31

0

There are many reasons for font awesome icons not showing- -wrong cdn links -not encasing link in or tag -when i had this this problem the error was totally different it took me 5-6 hours just to figure out that I am trying to use the Pro icons. It was funny when i figured it out if you are using free version check for free font awesome icons.

answered Mar 18 '23 at 11:31

Ranjit Devadiga

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 23 '23 at 12:51

Icon font not displaying some icons

3 Answers3

Linked