That said, would it not also make more sense to use codepoints within the "Miscellaneous Symbols And Pictographs" range where possible (http://unicode.org/charts/PDF/U1F300.pdf), where you'll find things like volume icons, padlocks, pins, etc. These are missing from my font of choice too, of course, but this seems more in keeping to me with the idea of a semantic web page.
Also, having a list of the icons together with their labels made it easy for me to know what they meant. Some of those icons would be baffling to me if they didn't have a label. I could be convinced that extra visual clutter is a good thing, but some designer is going to have to give a nice example.
If you want to browser-set font colors, you're going to have a hard time when they match CSS set background colors.
Personally, I'm not particularly fond of the use of :before, etc. either (they should be used for purely decorative purposes - the examples in the article seem to be using them to convey meaning), so what I'm suggesting doesn't really make much sense. :P
That would still have the risk of collisions when others use the area for a different character, but at least, the rendering library will have a reason to suspect that may be the case.
Or where the user configures his browser not to use downloadable fonts, like I do.