如何使用CSS更改图标图像的颜色？ [英] How can I change color of icon image using CSS?

问题描述

我想弄清楚如何更改半透明和半纯色的图像的颜色。

I am trying to figure out how to change the color of an image that is half transparent and half solid color.

我想要能够改变白色，所以我可以添加一个悬停，并添加了一个动态的方式来改变wordpress的颜色的能力。使用photoshop填充图像不是一个选项，因为我要建立一个换色器到我的Wordpress主题。

I want to be able to change the color of the white so I can add a hover, and add the ability to have a dynamic way to change the colors in wordpress. Using photoshop to fill the image isn't an option because I am going to build a color changer in to my Wordpress theme.

我使用一个jQuery脚本名为JFlat.js ，因为它看起来像我需要的完全。虽然它似乎并没有为我工作。按照确切的步骤，我猜它是因为它使用旧版本的jQuery。

I used a jQuery script called JFlat.js, because it seemed like EXACTLY what I needed. Although it doesn't seem to work at all for me. Following the exact steps I am guessing it is because it uses an old version of jQuery.

任何人都可以给我一些帮助吗？

Can anyone offer me some assistance?

这是一个黑色版本的图像，你不能看到白色的，所以我会发布这个一个更好的想法我在说什么。

Here is a black version on the image, you can't see the white one so I will post this one for a better of idea of what I am talking about.

推荐答案

使用 SVG图标 ，此图片来自标志性。 图标melon 也很好

否则，您可以使用< a href =http://fontawesome.io/icon/play-circle-o> font-icon ，此图片来自 FontAwesome

Otherwise you could use a font-icon, this one comes from FontAwesome

如果必须，您可以使用 CSS过滤器，但仅在较新的浏览器中受支持。最好的回退是使用SVG过滤器做同样的事情，并使用数据URL来应用它。 演示

If you must, you can use a CSS Filter but it is only supported in newer browsers. The best fallback would be to use SVG filter to do the same thing and use a data URL to apply it. Demo

-webkit-filter: invert(100%);

您也可以使用agconti建议的sprite

You could also use a sprite like agconti suggested

这篇关于如何使用CSS更改图标图像的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！