图标的CSS背景颜色填充

Question

I am planning to use flag image for the status. Please see the image

In this image i want to fill the background color of the flag using CSS. The background color code is coming from server then i want to update the flag's color according to the color i got from server

I tried with SVG but it is not working in IE8. Please help me how to do this. thanks in advance for any help

Note: I need to support From IE7 to latest browsers. Don't want to use separate images for different colors.

Answer 1

You can use the Font Awesome Icon library to draw the flag as an font and change the color with css.

http://fortawesome.github.io/Font-Awesome/icons/

<i class="icon-flag" style="color: green"></i>
<i class="icon-flag" style="color: orange"></i>
<i class="icon-flag" style="color: red"></i>

example http://jsfiddle.net/QvQtg/1/

Answer 2

If your flag will always be on the same background-color, you can simply use a .png, cut a hole where your color should appear and use background-color and background-image to create the desired result.

Html

<div class="flag"></div>

CSS

.flag {
    width: 45px;
    height: 54px;
    background-color: #f00;
    background-image: url(http://i.imgur.com/dD84kjR.png);
}

Example on JsFiddle: http://jsfiddle.net/a4EZ9/