HTML special characters in CSS "content" attribute

Question

I'm trying to add content to something before an item using the CSS :before + content: fields. I want to insert a checkmark (☑), BUT if I use that in the content option, it prints as the literal. How can I tell CSS to make that a checkmark, not the literal string ☑?

The question formulation is obscure. It was probably meant to refer to notations like `☑` getting displayed literally (the explanation being that they have no special meaning in CSS), i.e. an attempt was made to use HTML “escapes” for characters in CSS. — Jukka K. Korpela, Mar 26 '13 at 18:41

score 29 · Accepted Answer · edited Aug 12 '15 at 15:00

29

Try this:

#target:before {
  content: "\2611";
}

edited Aug 12 '15 at 15:00

sethvargo

26,739
10
86
156

answered Dec 18 '10 at 02:49

Flack

5,862
2
23
27

yes, but not exactly. That works (how did you know that??), but i need the checkbox with the box ( 9745;), not just the checkmark. Where can I look up these alternative codes? – sethvargo Dec 18 '10 at 02:52
2

Awesome, thanks! May I ask where you are finding this information? Could you please cite a source for my future reference? – sethvargo Dec 18 '10 at 02:56
6

http://en.wikipedia.org/wiki/List_of_unicode_characters and thousands more pages. – Flack Dec 18 '10 at 03:02
Genius with the backslash!! – Jamie Hutber Oct 01 '14 at 06:56

Brad Mace · Answer 2 · 2012-09-10T15:48:00.853

6

You need to use Unicode values inside the content property. (The list of miscellaneous symbols may also be useful.)

A heavy checkmark is listed as U+2713 so you would put content: "\2713";

edited Sep 10 '12 at 15:48

answered Dec 18 '10 at 02:58

Brad Mace

27,194
17
102
148

+1 I was confused with an alternate symbol because I didn't realize the U+ translated into \, thank you. – Sean Anderson Jan 09 '14 at 04:12

score 3 · Answer 3 · answered Dec 18 '10 at 02:56

3

Use the checkbox character literally in your CSS rule instead of the encoding -

#target:before {
    content: "☑";
}

See: http://jsfiddle.net/e3Wt2/

answered Dec 18 '10 at 02:56

Yi Jiang

49,435
16
136
136

3

This requires that the character encoding of the CSS file, or the HTML file containing CSS code, has been properly declared, see http://www.w3.org/International/O-charset – Jukka K. Korpela Mar 26 '13 at 18:36
@Al-Mothafar Did you check your encoding? – Yi Jiang Mar 31 '13 at 12:09
1

Just as importantly, it requires that the browser respect the coding; not all do. (I'm looking at older IE, of course.) – Chris Krycho Apr 20 '13 at 23:32

HTML special characters in CSS "content" attribute

3 Answers3

Linked