logo标签列表

我可以用CSS为Bootstrap图标添加颜色吗？

csstwitter-bootstrapspritecss-sprites
161

Twitter的Bootstrap使用Glyphicons图标。它们默认情况下是"黑灰色和白色可用"：

Picture-58.png

是否有可能使用CSS技巧改变图标的颜色？我希望有其他CSS3的技术可以避免为每种颜色设置一个图标图像。

我知道可以更改包含(<i>)元素的背景颜色，但我指的是图标前景色。我猜可以反转图标图像的透明度，然后设置背景颜色。

所以，我能否仅使用CSS为Bootstrap图标添加颜色?

我不这么认为...但是你可能可以使用JavaScript和画布元素来实现。 - bfavaretto
@bfavaretto - 你能详细说明一下吗？你是指编写代码/坐标来绘制每个图标，还是以某种方式使用现有的PNG图像？ - cwd
1
抱歉，我对canvas元素的经验不足以建议您编写代码，但我知道您可以使用canvas单独操纵像素。 - bfavaretto
14个回答
1

只需使用 GLYPHICONS，您就可以通过设置CSS来更改颜色：

#myglyphcustom {
    color:#F00;
}
1
接受的答案（使用字体awesome）是正确的。但由于我只想在验证错误时显示红色变体，所以我最终使用了一个附加包，在此网站上 友好地提供。
只需编辑css文件中的url路径，因为它们是绝对路径（以/开头），而我更喜欢相对路径。像这样：
.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}
最终，与旧版Bootstrap兼容的那个。 - Dmitry Ginzburg
1
您可以全局更改颜色，例如：
 .glyphicon {
       color: #008cba; 
   }
0

我想把这个片段添加到这篇旧帖子中。 这是我以前做过的事情，在图标成为字体之前：

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

这与@frbl的巧妙答案非常相似，但它不使用另一个图像。相反，它将<i>元素的背景颜色设置为white，并使用CSS属性border-radius使整个<i>元素“圆角化”。如果您注意到，border-radius的值（7.5px）恰好是width和height属性（均为15px，使图标成为正方形）的一半，使<i>元素成为圆形。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接