如何使用CSS更改图标图像的颜色？

Question

我试图弄清楚如何改变半透明和半纯色图像的颜色.

我希望能够改变白色的颜色,这样我就可以添加悬停,并添加一种动态方式来改变wordpress中的颜色.使用photoshop来填充图像不是一种选择,因为我将在我的Wordpress主题中构建一个换色器.

我使用了一个名为JFlat.js的jQuery脚本,因为它看起来完全像我需要的那样.虽然它对我来说似乎根本不起作用.按照我猜测的确切步骤,因为它使用了旧版本的jQuery.

有人能给我一些帮助吗？

这是图片上的黑色版本,你看不到白色版本所以我会发布这个版本以更好地了解我所说的内容.

Answer 1

使用SVG图标,这个图标来自Iconic.图标瓜也很好

否则你可以使用font-icon,这个来自FontAwesome

如果必须,您可以使用CSS过滤器,但仅在较新的浏览器中支持.最好的后备方法是使用SVG过滤器执行相同的操作并使用数据URL来应用它.演示

-webkit-filter: invert(100%);

您也可以使用像agconti建议的精灵

Answer 2

对于它的价值，这也可以用 svg 来完成

小提琴

查看谷歌的在线 svg-editor - 我用来制作 svg。（除了我稍后添加的 css 类）

svg

<svg class="play" width="252" height="252" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <circle class="outer" r="123.16656" cy="128" cx="128" 0 fill="#000000"/>
  <circle class="inner" r="97" cy="127" cx="128" fill="#ffffff"/>
  <path class="triangle" transform="rotate(89.2704 134.893 125.778)" id="svg_6" d="m93.75,161.77814l41.14282,-72l41.14288,72l-82.28571,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"  fill="#000000"/>
 </g>
</svg>

css

.play:hover .outer, .play:hover .triangle
{
    fill: #fff;
}
.play:hover .inner
{
    fill: #000;
}