Search code examples
cssspecial-characterspseudo-element

Insert × using CSS pseudo element

I am trying to use × &times HTML character as a close icon on a dialog link

.close:before {
    content: "\0274c";
    display: block;
    text-align: center;
    vertical-align: middle;
}

Firefox works with the example above and also using 

content: "\274c";

Chrome wont accept either and simply gives me a missing character square. I am using Arial as the font. What do I need to do to make this cross browser compatible?

Solution

  • The escape sequence you're using does not represent the × sign. It represents U+274C CROSS MARK, which is an entirely different symbol altogether (and one that happens to be represented in emoji as well).

    The codepoint of ×, as mentioned in the comments, is U+00D7 MULTIPLICATION SIGN, which is what you are looking for. The difference in size boils down to how each character glyph is drawn in the typeface.

    If a browser does not render U+274C (or any other given character for that matter), it may be an issue with either the font, or the browser, or even the platform.