How can I use a font icon as a background image?

Question

1) I know I can use a font icon using , pseudo selectors (before, after) and "content", but it is not a scalable solution, because I need to make many changes to padding, left, top etc in different situations

2) Using Data URI an svg is ok, but I need to change the fill/color of the svg based on different actions. I tried the fill property but it is not really working.

I can change/edit the color external but I have a lot of variations and again doesn't scale

---

The icon fonts(ex: FontAwesome) come with SVG files for the browsers. It is possible to use somehow that file in css (like image sprites) ?

Answer 1

If you want to modify properties of SVG's it will have to be placed inline. So using an SVG as a background and modifying properties won't work.

Libraries like FontAwesome give you a font , not svg 's which you can't set as a background either.

I don't see the problem of using the psuedo-selectors :before and :after for this. They are very scalable in my opinion.

If you really want to do it differently you should share some of your code with us so we can get a better understanding of what you're trying to do.