Search code examples
htmlunicodeiconshtml-entitieshtml-encode

How to insert an uncommon special character into a html attribute?

My approach / what I've found so far:

I want to insert an icon as the value attribute for an input tag as follows:

<input class="icon-" value="&#977154;" />
<!--the class is used to assign the icon font-->


I noticed that the CSS implementation of icon fonts has special characters as the content to be included as the icon:

.icon-search:before {
    content: "\e902";
}

So I looked for the equivalent HTML Entity code in order to include it as the value attribute and found that the corresponding code is &#977154; and also that it isn't a valid Unicode character.

So, I wonder how to encode the document so that it renders that character as the corresponding icon (after all, it's being rendered properly when implemented through the class, so perhaps there's a way).


Disclaimer:

I know there are other more "natural" ways to do something similar, but I want to know the scope of this possibility.

Solution

  • &#977154; is codepoint U+EE902, which is not assigned in Unicode.

    \e902 is codepoint U+E902 (&#59650;), which is a private-use codepoint.

    The two are completely different codepoints.