有没有办法用CSS3为div的背景图像着色？

Question

我在我的应用程序中使用了一个大的png sprite作为图标。这些图标都是灰色的，由透明背景组成。有没有办法让我用CSS着色它们？我尝试过webkit过滤器，但这似乎只适用于img。

HTML

<div class="icon iconPencil"></div>

CSS

.icon {float:left;width:16px;height:16px;background: url('../../images/interface/icons_x2.png') no-repeat 0 0;background-size: 1424px 1424px;}
.icon.iconPencil {background-position:-96px -32px;}

在上面的示例中，我想将cog图标着色，这是我的精灵的一部分，并且具有透明背景。

Answer 1

你不能用png来执行此操作，而你需要使用svg＆＃39;而不是https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Answer 2

如果你想使用图像，那么我会指出Sutherland关于使用css技巧的svgs的答案。如果你想使用字体图标，那么我会使用http://fortawesome.github.io/Font-Awesome/icons/。您所要做的就是将链接复制并粘贴到您的头部，然后您可以使用他们的图标列表。您可以像在网站上发送文字一样更改每个图标的颜色。

在向html页面的头部添加链接后样式化的示例：

/* CSS */

i.fa-cog {
color:#333;
}

<!-- HTML -->

<i class="fa fa-cog"></i>

我在几个项目中使用了字体真棒图标，这很棒。

Answer 3

无法达到你想要的效果。最好使用以下css和字体工具包。它很容易使用这个库，并不断更新新图标。

http://fontawesome.io/

<i class="fa fa-cog" style="color: red"></i> My Cog

这是一个JSFidde -

http://jsfiddle.net/costh/nuLvr4ue/

Answer 4

正如海登和查理所说，你最好的选择是使用图标字体。但这不仅限于字体很棒，你可以使用任何Unicode

div:before {
    content: '\2605';
    color: red;
}

<div>text</div>

您可以查找unicode字符here