3

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
⋮ â‹®
▾ â–¾
✔ ✔
Tyler
  • 3,616
  • 3
  • 22
  • 34
  • 1
    ⋮ = content: '\22EE', ▾ = content: '\25BE', ✔ = content: '\2714' – David Grosh Jun 23 '21 at 19:52
  • 1
    for other special characters refer to this: https://www.w3schools.com/cssref/css_entities.asp – David Grosh Jun 23 '21 at 19:54
  • 1
    It is unclear why the characters are appearing sometimes but not all the time, however using the code rather than the glyph in the CSS appears to be working initially. – Tyler Jun 23 '21 at 23:41
  • This may be a React-specific issue, but it seems to be related to this CSS entities question here: https://stackoverflow.com/questions/190396/adding-html-entities-using-css-content – Tyler Jun 23 '21 at 23:42

1 Answers1

2

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

Yaya
  • 4,402
  • 4
  • 19
  • 43