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?

Solution

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

Comments

[bhttoan]

Yes I did and many other things - it was very bizarre as it was specific icons rather than browsers per se. It turns it was something the developer needed to update in the app to do with U+7F to U+A0 not being able to be rendered or the browser ignoring them which he has now done and it is resolved

[zcrar70]

Thanks for following up + posting the resolution!

[tx291]

I'm having this same issue! How did you actually end up calling them? I've tried: <i class="icomoon-icon-nameoficon"> and <i class="icon-icomoon-nameoficon"> and neither work.