我怎样使用CSS改变图标图片的颜色？

Question

我正在尝试找出如何更改半透明和半实色的图像的颜色。

我希望能够更改白色的颜色，以便添加悬停效果，并添加一种动态方式来在WordPress中更改颜色。使用Photoshop填充图像不是一个选项，因为我要在我的WordPress主题中构建一个颜色更改器。

我使用了一个名为JFlat.js的jQuery脚本，因为它似乎正是我所需的。虽然对我来说似乎根本不起作用。按照完全相同的步骤进行操作，我猜测这是因为它使用了旧版本的jQuery。

有人可以给我提供一些帮助吗？

这是一个黑色版本的图像，你看不到白色的那个，所以我会发布这个版本以更好地了解我所说的内容。

- user1632018

---

看看CSS精灵 - agconti

你没有使用字体图标吗？ - Ali Gajani

Answer 1

使用SVG图标，这个来自Iconic。Icon melon也不错。

否则，您可以使用字体图标，这个来自FontAwesome。

如果必须，您可以使用CSS滤镜，但它只在新版浏览器中支持。最好的备用方案是使用SVG滤镜完成相同的工作，并使用数据URL应用它。演示。

-webkit-filter: invert(100%);

你可以像agconti建议的那样使用精灵图。

- Zach Saucier

Answer 2

值得一提的是，这也可以使用svg完成。

FIDDLE

查看谷歌在线svg编辑器 - 我用它来制作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;
}

- Danield

Answer 3

你可以尝试避免使用JQuery，只使用纯CSS和HTML。 代码显示了概念，但您需要调整尺寸使其正常工作。 您可能会发现使用border-radius：100％更有用。 然后，您可以根据需要应用:hover样式。

  <div class="outer-circle">
   <div class="inner-circle">
      <div class="triangle">
      </div>
  </div>
</div>

<style>
    .outer-circle {
        padding: 15px 0 0 15px;
        width: 150px;
        height: 150px;
        background: black;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;

    }

    .inner-circle {

        width: 135px;
        height: 135px;
        background: white;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;
        position:relative;
    }


    .triangle {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 80px solid black;
        border-bottom: 40px solid transparent;
        position: absolute;
        top:25px;
        left: 35px;
    }
</style>

- BillyJMcDonald

---

看起来需要增加很多工作量和标记，但它确实有效。 - Zach Saucier

谢谢回复。对我来说它们似乎不匹配。我也尝试过切换到边框半径100%。这些元素似乎不想正确地对齐。有什么想法吗？我正在使用Chrome浏览器。 - user1632018

我已经编辑了我的样式以使其工作。希望能有所帮助！ - BillyJMcDonald