How to Style a Unicode Character

How to style a unicode character?

You can try with filter

.red {  color: red;  background-color: yellow;}.red > span {   filter: hue-rotate(180deg) saturate(10);}

<span class="red">DROPLET <span>lt;/span></span>

Placing Unicode character in CSS content value

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

How to change the color of a unicode character

No. The color is inherent to the character -- there's a LARGE BLUE CIRCLE as well (U+1F535 - ), but no other colors are currently defined by the Unicode standard.

How to Resize Unicode Characters via CSS

You need to add the below CSS properties to li:before

font-size: 128px;
vertical-align: middle;

You can change the 128px to any size you want.

Demo

Unicode character as bullet for list-item in CSS

EDIT

I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:

li:before {
  content: "\2605";
}

OLD ANSWER

I'd probably go for an image background, they're much more efficient versatile and cross-browser-friendly.

Here's an example:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

CSS ::after - content property display unicode icon (2192) with the same styling on every browser

On the unicode website the font family used is actually sans-serif; not serif.

Using serif on that website changes the arrow that is displayed (ie making it not the one you want).

Therefore, it appears font-family: serif; does not display these unicode characters correctly; so you should substitute sans-serif instead:

.menu-item-has-children > a::after {
    content: "\2192";
    width: 0;
    display: inline-block;
    font-family: sans-serif;
}

Unicode via CSS :before

The escaped hex reference of  is \f066.

content: "\f066";

---

Related Topics