OVERHEAD

How to encode your symbols

CSS Linux

So, you’ve found a symbol you like, which in this hypothetical case is the “ℹ” symbol, and you want to find the following values:

  1. The decimal-numeric HTML entity (aka. &#...;).
  2. The hexadecimal-numeric CSS content value (aka. content: "\...").

And, you want to do this without spending the next five minutes searching for the values online… again.

If you’ve set <meta charset="UTF-8"> in the <head> of your HTML file, you can just paste “ℹ” into your HTML file (not into the CSS content value); HTML entities are optional when using UTF-8.

The only exceptions to this are characters like the less-than or greater-than symbols which do require you to use HTML entities.

In-browser method

  1. Navigate to your browser’s developer tools, which is typically bound to F12.
  2. Open its terminal (typically behind a tab labelled Console).
  3. Then, enter one of the following commands:
    1. For the HTML value, type in: "ℹ".charCodeAt(0).toString(10).
    2. For the CSS value, type in: "ℹ".charCodeAt(0).toString(16).
  4. Finally, execute the command (usually done with a button labelled Run).

To remove the need to remember both values, consider using the hexadecimal character reference for the HTML entity instead, e.g. &#x2139; (notice the added x).

Bonus Linux method

If you know the decimal value already, and want to find the hexadecimal value without using the browser’s terminal, simply run printf “%x” “8505” which will return 2139.