390

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?

Phrogz
  • 296,393
  • 112
  • 651
  • 745
davecave
  • 4,698
  • 6
  • 26
  • 32

1 Answers1

614

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).

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • 54
    Here's another list of arrows: http://unicode-table.com/en/sets/arrows-symbols/ Use the "U+" code, but replace the "U+" with "\". e.g. "U+25C0" becomes `content: "\25C0";` – Luke Dec 05 '14 at 15:26
  • 10
    This [Entity Conversion Calculator](http://www.evotech.net/articles/testjsentities.html) might be handy. – stove Mar 05 '15 at 08:07
  • 6
    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. – Alexis Wilke Sep 08 '15 at 04:22
  • 1
    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" – Matt Lacey Oct 24 '17 at 14:24
  • @MattLacey thanks for the tip. Was there something in the original answer that suggested the `u` part was necessary in the first place? – Matt Ball Oct 25 '17 at 09:43
  • @MattBall No! I had multiple questions open and must have picked that part up from another one! – Matt Lacey Oct 31 '17 at 05:59
  • \U+00E1 turns into \0000E1 – nodws Apr 03 '18 at 16:27
  • What about font awesome unicode? Can we use it here? – RoCkDevstack Jun 08 '18 at 00:23
  • 1
    @RoCk I have no experience with Font Awesome; does this answer your question? https://stackoverflow.com/a/17256965/139010 – Matt Ball Jun 08 '18 at 00:25
  • @MattBall - Thanks for the reply. No worries, I try this answer here - https://stackoverflow.com/questions/14294935/unicode-via-css-before/14294998?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – RoCkDevstack Jun 08 '18 at 00:29
  • here is the list of miscellaneous symbols: https://www.fileformat.info/info/unicode/category/So/list.htm – Gangula Jun 17 '23 at 19:31