Search code examples
javascripthtmlcsswebfonts

Certain web icons do not appear in browser


I made some webicons in the Private Use Area from E000-E900.

In my HTML I have tried placing them in <i>:

        <i class="wikicon wikicon-pencil"></i>

as well as <span>:

        <span class="wikicon wikicon-pencil"></span>

while in CSS:

       .wikicon-pencil:before {
        content: "\e800";
       }

Neither <i> nor <span> worked. With other icons though, it would work, it only happens to what seems like the unfortunate half of the icon set.

I tried them on Firefox, Safari, and Chrome. The only way it would work is when I specify the unicode entity, but that's not ideal at all.

        <i class="wikicon">&#xe000;</i>

Any help appreciated!


Solution

  • It is in private Unicode mapping, so following reply will explain you, you have to change mapping.

    How to embed Unicode Supplementary Private Use characters in CSS generated content?

    Hope this clarify all.