Question

我有一个要在应用程序中使用的图标库。这些主要是字形图标，但有一些其他字形。我希望html看起来与为字形图标定义的HTML相同，即

<a href="#">
    <span class="glyphicon glyphicon-wrench"></span>
    Normal Link
</a>

<a href="#">
    <span class="glyphicon blue .glyphicon-wrench"></span>
    Blue Link
</a>

我意识到glphicons实际上是一个 font ，通常不是图像，但是由于无法控制的要求，我不能依赖于已安装/可用的字体；所以我必须改用背景图片。

CSS：

.glyphicon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    content: "";
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.glyphicon .glyphicon-wrench: {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-440-wrench.png');
}

.glyphicon .glyphicon-envelope {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-11-envelope.png');
}

.glyphicon .glyphicon-info-sign {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-196-info-sign.png');
}

.glyphicon .glyphicon-danger {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-197-exclamation-sign.png');
}

此问题是我需要在不同位置使用不同颜色的图标。因此，我希望“ .blue”类和“ .white”类相应地更改图像颜色。现在，我通过创建一个使用图像编辑器来创建不同颜色的图像并为每种颜色设置一个部分来做到这一点：

.glyphicon .blue .glyphicon-wrench: {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-440-wrench-blue.png');
}

.glyphicon .blue .glyphicon-envelope {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-11-envelope-blue.png');
}

.glyphicon .blue .glyphicon-info-sign {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-196-info-sign-blue.png');
}

.glyphicon .blue .glyphicon-danger {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-197-exclamation-sign-blue.png');
}

我真的不喜欢创建所有这些额外的图像，并为每种颜色重复自己。有没有一种方法可以将 filter 应用于html元素的 Background-Image ，类似...

.glyphicon .blue {
     background-filter: RGB(0,0,1);
}

注释

我知道可以将过滤器应用于IMG标签，我需要能够将过滤器应用于背景图像。这些图标还具有透明的背景，需要保持透明。...因此，我需要一个仅影响图像前景的滤镜。

谢谢，

Answer 1

如果您不能使用字体，请尝试在html顶部内联SVG精灵。

隐藏SVG精灵本身，但是稍后您可以在HTML中使用<use> element通过其唯一ID引用精灵的每个图标。

使用ScopedArPose在SVG中设置array<float, 16>的颜色，可以将带有CSS的fill添加到任何父节点，以控制每个图标实例的颜色。

fill="currentColor"

color

使用CSS更改背景图像的颜色

1 个答案: