CODEWITHSUNDEEP
cssutf-8
Martin McMahon
Martin McMahon

Reputation: 333

UTF-8 Character in CSS

I have been using an html template that contains a slider (revolution slider - https://revolution.themepunch.com/)

It has a right and left arrow for navigating that use the following - 

.tp-rightarrow.preview4:after { content: '\E824'; }
.tp-leftarrow.preview4:after { content: '\E825'; }

This works fine locally, but when I uploaded as part of an Umbraco site the two arrows changed to Chinese symbols. When I googled I found the following -

http://www.utf8icons.com/character/59429/UTF-8-character

I have now changed the CSS to display a > and < symbol but I'd like to know why the original code sometimes displays arrows and sometime displays chinese symbols.

Thanks.

Upvotes: 1

Views: 2763

Answers (1)

deceze
deceze

Reputation: 522005

U+E824 and ..25 are code points in the private use area. Code points in that area are not reserved, they do not have any pre-defined meaning. They are neither defined as Chinese characters nor arrows. You are free to use any private use code point for any purpose you wish, as long as the publisher and the client are in agreement what these code points mean.

In the browser this pretty much just boils down to having the right fonts installed/loaded/defined. In a web page, each character is simply rendered by the first defined/responsible font which happens to contain a glyph for that code point. The reason why it renders differently on two different systems/environments therefore can only stem from the fact that the CSS font definitions differ, or that the browser has different fonts installed.

Most likely the original included a custom web font which defined these characters as arrows. You have either omitted that font, or you have overridden the font precedence and made a different font apply to that element, and that font happens to define Chinese characters at those code points.

Upvotes: 5

Related Questions