CODEWITHSUNDEEP
csssvgfontsicons
user3541631
user3541631

Reputation: 4008

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

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) ?

Upvotes: 0

Views: 1861

Answers (1)

Melvin Koopmans
Melvin Koopmans

Reputation: 3060

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.

Upvotes: 1

Related Questions