React Replacing Special Characters in CSS `content`

user_3305145 0
Viewed 564

Issue

When loading my React webapp, sometimes special characters (e.g. ⋮) are replaced with strings of other characters (e.g. â‹®). The special characters appear correctly most of the time, but when this bug occurs all the below-listed special characters fail to display correctly. I am unable to intentionally replicate the issue.

Code Sample

The special characters are all within the CSS styles:

.someElement:before {
  content: "⋮";
}

Example Characters

Here are the unintended replacements that are occurring with seemingly random frequency:

Intended Character Characters that Appear
⋮ â‹®
▾ â–¾
✔ ✔
reactjs pseudo-element css html javascript
1 Answers

For using special characters in CSS you must add their CSS entity instead of only character

in your case you want to add ⋮ to css which its entity code is \22EE

.someElement:before {
  content: "\22EE";
}

for more entity codes check out here

https://www.w3schools.com/cssref/css_entities.asp

user_142711100
Related