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

Question

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

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

The result is such a beautiful button:

But at random, the string × is replaced by the string Ã- . At first I thought that this could be due to coding, but if this is really a problem, I think that this will not happen by accident. This happens at a low frequency, and at this point this does not happen (will refresh the question using another print screen as soon as this happens again).

This css code comes from a .less file that I compile and then reduce and then concatenate.

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

Answer 1

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

So the problem is that CSS is decoded as Windows-1252 and not as UTF-8. CSS is usually decoded in the same way as an HTML document, so it seems that the page does not have a single character set specification specifier, nor in the HTTP header. This makes the browser guess what the encoding is. Since the browser makes an assumption using any available data (and the algorithm differs between browsers), the assumption may be different depending on which part of the page and related files are already in the cache.

Specify the encoding for the page in the head of HTML:

 <meta charset="utf-8"> 

You can also specify the encoding specifically for the CSS file by adding this at the top, but this is only necessary when it is different from the page encoding:

 @charset "utf-8"; 

Answer 2

Try using the "ISO" value for this character - \00d7

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

Answer 3

If you see these characters, you probably just did not specify the character encoding correctly. Because these characters are the result when a multibyte string of UTF-8 is interpreted in single-byte encoding such as ISO 8859-1 or Windows-1252.

Use utf8_decode () to convert them to normal ISO-8859-1 characters. http://php.net/manual/en/function.utf8-decode.php

or add

 <meta charset="UTF-8"> 

or use header("Content-Type: text/html; charset=utf-8"); on top of your PHP scripts.