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 ☑?

Answer 1

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";

Answer 2

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

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

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

Answer 3

Try this:

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