Certain web icons do not appear in browser

Question

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!

Answer 1

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.

Answer 2

Can you provide more codes how you are using? As css coding is not present in question.

As I am using in following way in my css

.icon-file-alt:before {
  content: "\f016";
}

and on my html

<i class='icon-file-alt'></i>

I have also special fonts added in website which is basically icons.