unable to find the reference to the content property in a stylesheet

Problem

Firstly let me admit that I am a beginner in CSS. I recently came across a nice website: http://www.sitepoint.com/better-solution-managing-z-index-sass/ and was curious to know how the "3" is displayed alongside "CSS". When I tried to check through the firebug, I saw a class name ".category-css .icon-category:before" which contains content property which has some strange content. Could you please let me know where is content property pointing to. I know this might be the silliest question, but I am clueless.

Problem courtesy of: zilcuanu

Solution

On the <i class="icon-category> they are setting a font-family: 'sitepoint', Sans-Serif;, on the :before element the content element is using a Unicode, which will relate to a character from their custom font 'sitepoint'.

For example, Font Awesome uses unicodes for it's characters, as you can see each character has a unique code next to it.

Solution courtesy of: Jon Kyte

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.