The normal way of delivering iconography on websites was traditionally the use of bitmap formats such as PNG. They're quick and direct, and they ensure out final results.
The use of web fonts have given us another alternative. By definition, they're scalable and resolution-independent. No need to specify higher resolution graphics for high resolution screens.
Lets see some examples:
» Keep Reading : Icon Fonts for Web
The intersection of two circles, generates a straight line, but if we change the relative position of the circles, the intersections can be used to create this:
» Keep Reading : Circle Intersection
Long time ago I needed to create a text message where the font was filled with icons.
The idea was quite simple, find a point over the text, and then expand a rectangle checking that the four corners are still overlapping the text.
Now I decide that is time to use bitmaps, and blendModes, to allow not only rectangles, but any other shape over our text, and this is the result.
» Keep Reading : Mosaic Font Generator
Since then, I realice the power of css borders to create geometrical figures. This allow me to forget about images, and create the geometric shapes with only a few lines of css.