Unicode icons: sometimes looks like a wrong encoding

Question

In my CSS I have this (unrelated code is omitted):

.selector:after {
    content: '▾';
}

Normally it looks like this:

But sometimes I open my browser extension and see this â–¾:

In devtools I see the same:

Why this happens? How can I fix it?

Answer 1

https://www.w3.org/International/questions/qa-css-charset

If it's a separate style sheet resource, add @charset "UTF-8"; to the response body and Content-Type: text/css; charset=UTF-8 to the response header.