Placing Unicode character in CSS content value [duplicate]

Question

I have a problem. I have found the HTML code for the downwards arrow, ↓ (↓)

Cool. Now I need to use it in CSS like so:

nav a:hover {content:"&darr";}

That obviously won't work since ↓ is an HTML symbol. There seems to be less info about these "escaped unicode" symbols that are used in css. There are other symbols like \2020 that I found but no arrows. What are the arrow codes?

Xavler

You need a :before or :after for content to work – Almazan

A simple Google search revealed blooberry.com/indexdot/html/tagpages/entities/arrow.htm listing the Unicode code points for many arrows. – Nomenclator

@Nomenclator Unfortunately, that site doesn't include "/" in the unicode, so normally I would have no idea I would have to add "/" to the code in order for it to work in css. I know now that I will have to add "/" in order for it to work. – Xavler

@davecave, it's actually backslash (\). – Thomism

Awesome tool: evotech.net/articles/testjsentities.html (no personal connection; I just use it) – Haik

In CSS, you can just paste the pre-rendered Unicode character, if you're saving in UTF-8. ↓ – Willodeanwilloughby

a:hover :before { height: 30px; position: absolute; top: 0; content: '\2B07'; } – Toffee

Answer 1

Why don't you just save/serve the CSS file as UTF-8?

nav a:hover:after {
    content: "↓";
}

If that's not good enough, and you want to keep it all-ASCII:

nav a:hover:after {
    content: "\2193";
}

The general format for a Unicode character inside a string is \000000 to \FFFFFF – a backslash followed by six hexadecimal digits. You can leave out leading 0 digits when the Unicode character is the last character in the string or when you add a space after the Unicode character. See the spec below for full details.

---

Relevant part of the CSS2 spec:

Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:

1. with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B")

In fact, these two methods may be combined. Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.

If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).

• Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not).
  The identifier "te\st" is exactly the same identifier as "test".

---

Comprehensive list: Unicode Character 'DOWNWARDS ARROW' (U+2193).

Ricardo

Here's another list of arrows: unicode-table.com/en/sets/arrows-symbols Use the "U+" code, but replace the "U+" with "\". e.g. "U+25C0" becomes content: "\25C0"; – Definiens

This Entity Conversion Calculator might be handy. – Polypropylene

One detail, to add a space after the escaped character, you need to add two spaces `\2193␣␣'. This is because the first space is eaten by the CSS parser. This is the case if the Unicode number is 5 or less characters. – Glenoid

For anyone coming here trying to get this to work with the content CSS property and iOS, you need to use your symbol/codepoint, followed by the unicode variant without a 'u', e.g. conent: "\2b06\fe0e" – Prang

@MattLacey thanks for the tip. Was there something in the original answer that suggested the u part was necessary in the first place? – Ricardo

@MattBall No! I had multiple questions open and must have picked that part up from another one! – Prang

\U+00E1 turns into \0000E1 – Parturifacient

What about font awesome unicode? Can we use it here? – List

@RoCk I have no experience with Font Awesome; does this answer your question? https://mcmap.net/q/75717/-font-awesome-amp-unicode – Ricardo

@MattBall - Thanks for the reply. No worries, I try this answer here - https://mcmap.net/q/75718/-unicode-via-css-before/… – List

here is the list of miscellaneous symbols: fileformat.info/info/unicode/category/So/list.htm – Schuler

hahaha! by providing exactly 6 hexadecimal digits: "\000026B" ("&B") Anyone else notice that example shows exactly 7 digits? – Twicetold