Adrian E Adrian E - 1 year ago 79
CSS Question

Force UTF-8 encoding in inline CSS

I have inline CSS loading within an element which renders a close (

) icon on a popup overlay. When rendered on a page which is not in UTF-8 it is rendered badly with local characters instead.

Code is as follows:

color: #fff;
border: 1px solid #918686;
border-radius: 30px;
background: #575757;
font-size: 25px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 13px 6px;
font-family: "Times Roman", times, serif;


Two questions:

  1. Is there an HTML equivalent of a close icon (X) that I can use in the CSS content type? And will it be rendered the same way regardless of encoding?

  2. Can I force UTF-8 encoding in the inline CSS only for this class? I do not have control over the rest of the page which resides on 3rd party server.

  3. Can I use a BASE64 image in the
    selector? If so, how do I do it?

Answer Source

The CSS syntax for Unicode characters does not include the u prefix. The correct syntax is: content:"\00D6"; or simply content:"\D6";. This character notation always refers to a Unicode Codepoint regardless of the character encoding of the (HTML) document that contains it.

However, the character "\00D6" refers to the Unicode character

This is likely to display badly if you expected it to display a cross. Perhaps you meant to use "\00D7":

In other words, your code should read:

.close::before {
  content: "\00D7";