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 ing 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.

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 ing 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.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 31, 2013 at 14:25 Mohamed HussainMohamed Hussain 7,7231515 gold badges6060 silver badges8787 bronze badges 4

• Why can't you use an image and swap it out? I would think that would be easier. – Keith Commented Jul 31, 2013 at 14:26
• 1 @Keith well if the number of colors that need to be supported is large, that would be a problem. – Pointy Commented Jul 31, 2013 at 14:26
• I feel like you either want to use images here, or a rectangular flag. Otherwise this is going to be ugly - and probably wont ever work in older versions of IE. – Gray Commented Jul 31, 2013 at 14:28
• 1 You shouldn't be supporting IE7. It's been discontinued and usage has fallen below 1% – jezzipin Commented Jul 31, 2013 at 14:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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/QvQtg/1/

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./dD84kjR.png);
}

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

For font-awesome version 5 Pro, you can just set font-wight to 900 and it will fill the icon.

content: "\f058";
font-family: "Font Awesome 5 Pro";
font-style: normal;
font-weight: 900;
font-size: 20px;
color: green;