Why do I randomly get the string "Ã-" instead of "×" when setting button:after { content }?

Question

I am using the following css to set the text for a button that will remove a tag:

button.close:after {
  content: '×';
}

This results in a good looking button like this:

But randomly the string × gets replaced by the string Ã-. I first thought this could be related to encoding but if indeed it was the problem I think this wouldn't happen randomly. It happens at a low frequency and at this very moment it is not happening (will update the question with another print screen as soon as it happens again).

This css code comes from a .less file that I am compiling and then minifying and then concatenating.

How can I make sure the string × will be shown all the time?

Answer 1

The multiplication character has the UTF-8 sequence 0xC3 0x97. When that is decoded using the Windows-1252 character set instead it becomes × (A tilde, em dash).

So, the problem is indeed that the CSS is decoded as Windows-1252 instead of as UTF-8. The CSS is normally decoded the same way as the HTML document, so it seems that there is no character set specification netier in the page nor in the HTTP header. That forces the browser to guess what the encoding is. As the browser is making the guess using any available data (and the algorithm differs between browsers) the guess can be different depending on how much of the page and related files are in the cache already.

Specify the encoding for the page in the HTML head:

<meta charset="utf-8">

You can also specify the encoding specifically for the CSS file by adding this at the top, but that should only be needed when it differs from the page encoding:

@charset "utf-8";

Answer 2

Try using 'ISO' value for that sign - \00d7

Check here: https://css-tricks.com/snippets/html/glyphs/