Font-face icons (Font Awesome, etc.) are essentially monochrome and, probably, will always be.
By this method of adding selectors to individual paths, SVG presentation attributes can be used as CSS properties and therefore the elements of the resultant 'image' can be configured, edited, independently. Add some Sass and who knows...
(For the time being, presented here in 3 formats: svg data urls, png data urls, and a fallback CSS file with references to .png image files.)
Entering a different CSS world of fill rather than background and stroke rather than border.
fill-opacity seems to work particularly well, even at present.
stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-mitrelimit, stroke-opacity...
fill-rule, filters...
glyph-orientation-horizontal, glyph-orientation-vertical...
A standard grunt setup, with:
npm install grunt-grunticon --save-dev
Follow the recipe as per https://github.com/filamentgroup/grunticon
For any production use, best to clean up and minimise the source svgs with svgmin
npm install grunt-svgmin --save-dev