Using Unicode characters to improve your website!

Using HTML unicode characters can help you reducing the amount of images on your site, just using the right HTML code and you can get this: or this

Doing that is as simple as adding its unicode code like this:

tick: <span style="color:green">&#10004;</span>
star: <span style="color:red">&#9733;</span>

To get an idea of which unicode characters you can use just check this W3C list. Though probably what you really want is to have a look at the symbols, the geometric shapes, the arrows or the dingbats.

Unicode format

Have always in mind that there are more unicode character sets than the standard (UTF-8), like UTF-16. You can make use of other standards by setting it on a meta or on your XHTML declaration tag:

    <meta charset="ISO-8859-1">

Checkbox symbols

These symbols can be quite nice when editing a checkbox:

  • ☐ (hex: &#x2610; / dec: &#9744;): ballot box (empty, that’s how it’s supposed to be)
  • ☑ (hex: &#x2611; / dec: &#9745;): ballot box with check
  • ☒ (hex: &#x2612; / dec: &#9746;): ballot box with x
  • ✓ (hex: &#x2713; / dec: &#10003;): check mark, equivalent to &checkmark; and &check; in most browsers
  • ✔ (hex: &#x2714; / dec: &#10004;): heavy check mark
  • ✗ (hex: &#x2717; / dec: &#10007;): ballot x
  • ✘ (hex: &#x2718; / dec: &#10008;): heavy ballot x

Just imagine you add some colouring and font-sizing to them:
Option 1
Option 2
Option 3

You could have custom checkboxes quite easily!!

Leave a Reply

Close Bitnami banner
Bitnami