javascript - 图标的 CSS 背景颜色填充

Question

我打算使用标志图像作为状态。请看图

在这张图片中，我想使用 CSS 填充旗帜的背景颜色。背景颜色代码来自服务器然后我想根据我从服务器获得的颜色更新标志的颜色

我尝试使用 SVG，但它在 IE8 中不起作用。请帮我怎么做。在此先感谢您的帮助

注意:我需要支持从 IE7 到最新的浏览器。不想为不同的颜色使用单独的图像。

Answer 1

您可以使用 Font Awesome Icon 库将旗帜绘制为字体并使用 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>

例子 http://jsfiddle.net/QvQtg/1/