如何使用 CSS 更改图标图像的颜色？ [复制]

Posted 2023-02-23

【中文标题】如何使用 CSS 更改图标图像的颜色？ [复制]

【英文标题】：How can I change color of icon image using CSS? [duplicate]

【发布时间】：2014-01-13 01:49:10

【问题描述】：

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

我希望能够更改白色的颜色，这样我就可以添加悬停，并添加在 wordpress 中以动态方式更改颜色的功能。使用 Photoshop 填充图像不是一个选项，因为我要在我的 Wordpress 主题中构建一个换色器。

我使用了一个名为 JFlat.js 的 jQuery 脚本，因为它看起来正是我所需要的。虽然它似乎对我根本不起作用。按照我猜测的确切步骤，这是因为它使用了旧版本的 jQuery。

谁能给我一些帮助？

这是图片上的黑色版本，您看不到白色版本，因此我将发布此版本以更好地了解我在说什么。

【问题讨论】：

查看css sprites

你没有使用字体图标吗？

【参考方案1】：

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

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

如果必须，您可以使用CSS Filter，但它是only supported in newer browsers。最好的后备方法是使用 SVG 过滤器来做同样的事情并使用数据 URL 来应用它。 Demo

-webkit-filter: invert(100%);

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

【参考方案2】：

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

FIDDLE

查看google's online svg-editor - 我用来制作 svg。 （除了我后来添加的css类）

svg

<svg class="play"   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;

【参考方案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>

【讨论】：

看起来像很多额外的工作和标记，但它确实有效

感谢您的回复。他们似乎不适合我。我也尝试切换到边界半径 100%。这些元素似乎不想正确排列。任何想法为什么？我正在使用 Chrome。

我已经编辑了我的样式来工作。希望对您有所帮助！