How to Use Character Entities in CSS, HTML and JavaScript

Sometimes when using scripts you need to type special characters, such as diacritics, using special groups of symbols called character entities. However, these do not always look good or we have a question mark or other strange symptoms. This is usually fixed if the characters are encoded correctly, but the logic may not always work.

In Blogger, special characters are usually displayed correctly, but when it comes to other services, such as external files, things can be tricky.

For example, this generally looks fine, and you should see the characters the right way when you click this link .

alert ("á é í ó ú ☺ ✛ ❤");

If we try another method and want to use such characters, sometimes we have to write in a special escape sequence, which is a letter and number in hexadecimal format after the backslash. For regular or accented characters, this \x is followed by two hexadecimal digits.

\ x e1 is the letter á
\ x e9 is the letter é
\x The letter is í.
\ x f3 character
\ x fa is the letter ú.

Other combinations produce special characters

\n a new line.
\t is a tab character.
\ 'One quote.
"It's a double quote.
\\ It's a backlog.

Instead, we can use the Unicode character code specified by four hexadecimal digits :

\ u 00e1 character
\ u00e9 is the letter é
\ u 00ed is the letter í.
\ u 00f3 character
\ u 00fa is the letter ú.

This allows us to see exactly what we could not see before if we used other services:

notification("\u263a\u2764\u271b");

On this page you will find a complete list of all the different letters, symbols and fonts.

While rare characters are rarely used in CSS, there is also the case of pseudo-elements after : and : before using the content property.

The same parameters apply here, but just add a backslash followed by a four-digit hexadecimal code. For example:

content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ": after \ 263a \ 2724 \ 2602";

: ⓑⓔⓕⓞⓡⓔ

: after ✤ ☂

Remember, IE doesn't support dummy content before: and you have to set the listType property to something else, otherwise you'll get two points enabled by CSS.