CSS Tips - StanfordBioinformatics/pulsar_lims GitHub Wiki

1. Adding Unicode symbols in your stylesheets

Adding Unicode symbols in your stylesheets

I use this to add non-ASCII symbols, for example, the Celsius symbol, to all elements having some specific class. Let's say you define a 'celsius' class and you add this to any element that needs to display the Celsius symbol. The relevant CSS would look like this:

.celsius {
  &:after {
    content: " \2103";
  }
}

First off, I must note that I'm using Sass to simplify coding my stylesheets - I'm utilizing a nested style here as well as '&', which resolves to the parent selector '.celsius'; see this Sass article for more details on the latter). Neither of these two features is part of the CSS specification. Sass is a CSS extension; it is a preprocessor that takes its input and outputs a valid CSS file.

The '2103' here is the hexadecimal value of the UTF code point for ℃, and needs to be prefixed with a '\'. See this w3schools page that lists several different characters you can express in this manner. Note that if you wanted to code the symbol directly in HTML, you must prefix the code point with a '&#x' and suffix it with a semicolon, i.e. '℃'.