Some Icomoon icons won't display

Question

I am using Icomoon in an application - I am having a problem with a small number of icons which will not display. I have downloaded all the icons via the Icomoon App and this is the latest version - all 450 are selected.

I have tried on just a blank page with no other CSS and they still don't work in case it was some CSS in my application causing it.

<link rel="stylesheet" type="text/css" href="/css/icons/icomoon/style.css" media="screen" />

<i class="icon-user"></i> User
<i class="icon-bars"></i> Bars
<i class="icon-search"><i> Search

In the above, bars displays fine but user and search do not.

Here is my style.css file (truncated):

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

[class^="icon-"], 
[class*=" icon-"]
{
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

[class^="icon-"]:before, 
[class*=" icon-"]:before
{
    font-family: 'IcoMoon';
    font-weight: normal;
    font-style: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.icon-users:before {
    content: "\92";
}
.icon-bars:before {
    content: "\b8";
}
.icon-search:before {
    content: "\a0";
}

If I open up icomoon.svg (the only one I can "edit") then 92 and a0 are both there:

<glyph unicode="&#x92;" d="M734.994 154.626c-18.952 2.988-19.384 54.654-19.384 54.654s55.688 54.656 67.824 128.152c32.652 0 52.814 78.138 20.164 105.628 1.362 28.94 41.968 227.176-163.598 227.176-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.632-289.006-109.316-289.006-218.626h768c0 109.31-227.958 208.994-289.006 218.626zM344.054 137.19c44.094 27.15 97.626 52.308 141.538 67.424-15.752 22.432-33.294 52.936-44.33 89.062-15.406 12.566-27.944 30.532-35.998 52.602-8.066 22.104-11.122 46.852-8.608 69.684 1.804 16.392 6.478 31.666 13.65 45.088-4.35 46.586-7.414 138.034 52.448 204.732 23.214 25.866 52.556 44.46 87.7 55.686-6.274 64.76-39.16 140.77-166.454 140.77-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.634-289.006-109.318-289.006-218.628h329.596c4.71 3.074 9.506 6.14 14.458 9.19z" />

<glyph unicode="&#xa0;" d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384 0-212.078 171.922-384 384-384 95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />

Additionally, in the demo html file created from the icomoon app all the icons from 7f (download) to a0 (search) show as blank - both the icons I am trying to use fall into this range.

Any idea why some will show but others will not?

Answer 1

I found the solution. My problema was that just a few icons were not displaying at all, but after opening the html file that comes on the zip I saw those same icons were displaying correctly. So I saw the html and css and saw that to call the icon through a class the file was using to classes. The first one appears below the @font-face call that basically sets the style and family of the font, everything needed for the font to display correctly so call this class. The next example is using my classes and icomoon font files.

@font-face {
     font-family:"icomoon";
     src: url('fonts/icomoon.eot');
@font-face {
     /*All the urls*/
}

/*THIS IS THE ONE YOU NEED TO CALL*/
.icomoon {
     font-family: "icomoon";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
/*Better font rendering ======*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Answer 2

The problem I encountered in IE11 & edge was that the uppercase variant was shown instead of the lowercase icon. This is because IE11/edge ignores the case when dealing with css-applied characters and just searches for the first 'match' in the font file.

As you can see in this picture, the lowercase 'g' maps to a trashbin-icon whilst the uppercase 'G' maps to a play-icon. IE11 & edge erroneously used the first uppercase variant.

You can test this possible cause by inspecting your font file using font forge and by explicitly declaring a "text-transform: lowercase/uppercase" in the css on the icon itself and see if that fixes it.

To ultimately fix this, I removed all uppercase letters from the icon font and re-mapped everything to other unicode characters and everything worked as expected. I found my solution in this article: Icon font behaving strangely in IE11

Answer 3

Did you try the solutions proposed in previous stackoverflow answers?

IcoMoon icons not working in Internet Explorer 8

Why does one of these font-face render in IE8, but the others don't?

Also, see http://adactio.com/journal/6555/

Answer 4

When you create a new icon with icomoon you get a preview before download. If an icon has a label of 'multicolor' will not display. I created some icons in illustrator and imported them to the app. As I had silhouettes in white and backgrounds in white, the icons were kind of broken and couldn't be used.

Had to use pathfinder to fix them and make it just one color, also having line strokes kills your icons.