396

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?

7
  • 14
    You need a :before or :after for content to work
    – Musa
    Commented May 1, 2012 at 4:36
  • 2
    A simple Google search revealed blooberry.com/indexdot/html/tagpages/entities/arrow.htm listing the Unicode code points for many arrows.
    – Phrogz
    Commented May 1, 2012 at 4:36
  • 2
    @Phrogz 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.
    – davecave
    Commented May 1, 2012 at 16:08
  • 3
    @davecave, it's actually backslash (\). Commented Jun 30, 2014 at 21:20
  • 2
    Awesome tool: evotech.net/articles/testjsentities.html (no personal connection; I just use it) Commented Jul 9, 2016 at 12:43

1 Answer 1

629

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

13
  • 54
    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";
    – Luke
    Commented Dec 5, 2014 at 15:26
  • 10
    This Entity Conversion Calculator might be handy.
    – stove
    Commented Mar 5, 2015 at 8: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. Commented Sep 8, 2015 at 4: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
    Commented Oct 24, 2017 at 14:24
  • 1
    @RoCk I have no experience with Font Awesome; does this answer your question? stackoverflow.com/a/17256965/139010
    – Matt Ball
    Commented Jun 8, 2018 at 0:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.