Twitter的Bootstrap使用Glyphicons图标。它们默认情况下是"黑灰色和白色可用"：
是否有可能使用CSS技巧改变图标的颜色？我希望有其他CSS3的技术可以避免为每种颜色设置一个图标图像。
我知道可以更改包含(<i>)元素的背景颜色，但我指的是图标前景色。我猜可以反转图标图像的透明度，然后设置背景颜色。
所以，我能否仅使用CSS为Bootstrap图标添加颜色?
我可以用CSS为Bootstrap图标添加颜色吗？
161
- cwd
3
我不这么认为...但是你可能可以使用JavaScript和画布元素来实现。 - bfavaretto
@bfavaretto - 你能详细说明一下吗？你是指编写代码/坐标来绘制每个图标，还是以某种方式使用现有的PNG图像？ - cwd
1抱歉，我对canvas元素的经验不足以建议您编写代码，但我知道您可以使用canvas单独操纵像素。 - bfavaretto
14个回答
190
如果您在使用 Bootstrap 时同时使用 Font Awesome，那么可以使用 Font Awesome 的图标！这些图标略有不同，但数量更多，无论大小如何都非常好看，而且您可以更改它们的颜色。
基本上，这些图标是字体，您可以通过 CSS 的颜色属性来更改它们的颜色。集成说明在提供的链接底部。
编辑：Bootstrap 3.0.0 图标现在也是字体啦！
正如其他人也提到的，在 Bootstrap 3.0.0 中，默认的图标字形现在也像 Font Awesome 一样是字体，只需更改 color CSS 属性即可更改其颜色。可以通过 font-size 属性来更改大小。
- hajpoj
3
9哦，聪明！别忘了设置
cursor: default;，这样用户就看不到闪烁的光标。还有，你应该看看 FF Chartwell 这个非常聪明的字体：http://tktype.com/chartwell.php - Dai4当你在计算机上观察到文字时（比如在文字处理软件中），鼠标指针会变成一个放大的大写字母“I”形状，用于选择文本。在CSS中，这被称为
cursor: text;，也被称为“I梁”（I-beam）。 - Dai@hajpoj，
Font Awesome的链接已经失效。 - sajeyks mwangi40
随着Bootstrap RC 3的最新发布，更改图标颜色就像添加一个带有所需颜色的类，并将其添加到中一样简单。
默认黑色：
<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>
会变成什么
<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>
CSS
.icon-success {
color: #5CB85C;
}
- fseminario
18
因为glyphicons现在是字体，所以可以使用contextual classes将适当的颜色应用于图标。
例如：
例如：
<span class="glyphicon glyphicon-info-sign text-info"></span>
添加text-info到css中将使图标成为信息蓝色。- truncie
1
谢谢，我正在寻找一种应用上下文类的方法。任何text-*上下文类都可以使用。 - Dustin Hodges
14
将 Bootstrap 图标呈现为不同颜色的另一种可能方法是创建一个所需颜色（比如洋红色）的新 .png 文件，并将其保存在 /path-to-bootstrap-css/img/glyphicons-halflings-magenta.png。
在您的 variables.less 文件中查找
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
并添加这行内容
@iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png";
在你的sprites.less文件中添加
/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url("@{iconMagentaSpritePath}");
}
并像这样使用：
<i class='icon-chevron-down icon-magenta'></i>
希望能对某人有所帮助。
- Sepp Ludger
3
5我想再强调一下，“我希望有其他的CSS3技巧，可以避免为每种颜色都设置一个图标”。 - cwd
无法仅通过CSS实现跨浏览器兼容性。通常人们需要一个带有相关图标的颜色方案 - 因此我会说最多5个颜色集并不是太具有挑战性。 - foxybagga
@seppludger 你如何创建一个新的彩色半身像精灵？你成功做到了吗？如果我在任何图形编辑器中加载它们，我就无法更改颜色。 - Norman
7
以下是一个简单粗暴的解决方法，对我很有用。我们并不是真正地给图标上色，而是用你想要的颜色围绕它加上标签或徽章。
<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>
- frbl
2
你的回答很有用，+1。我想使用编辑图标并且希望把它变成黄色。请问您可以告诉我如何做吗？ - user2948112
你可以将icon-ok更改为其他内容，例如：<span class="label-warning label"><i class="icon-<iconname> icon-white"></i></span>，比如：<span class="label-warning label"><i class="icon-edit icon-white"></i></span>。我认为最好使用新的bootstrap。 - frbl
6
Bootstrap Glyphicons 是字体。这意味着它可以像任何其他文本一样通过 CSS 样式进行更改。
CSS：
<style>
.glyphicon-plus {
color: #F00;
}
</style>
HTML：
<span class="glyphicon glyphicon-plus"></span>
例子：
<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.glyphicon-plus {
color: #F00;
}
</style>
</head>
<body>
<span class="glyphicon glyphicon-plus"></span>
</body>
</html>
观看Jen Kramer的课程《Bootstrap 3快速入门》，或者观看关于如何使用自定义样式覆盖核心CSS的单独课程。
- Eugene
4
也适用于style标签：
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>
<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
- joan16v
4
其实很简单：
只需使用：
.icon-name{
color: #0C0;}
例如：
.icon-compass{
color: #C30;}
这就是全部。
- Aniruddh Dixit
4
这有点绕。我使用了类似这样的字形。
并且为了改变颜色，我在头部加入了一小段css，如下所示。
</div>
<div class="span2">
<span class="glyphicons thumbs_up"><i class="green"></i></span>
</div>
<div class="span2">
<span class="glyphicons thumbs_down"><i class="red"></i></span>
</div>
并且为了改变颜色，我在头部加入了一小段css，如下所示。
<style>
i.green:before {
color: green;
}
i.red:before {
color: red;
}
</style>
看，绿色和红色的大拇指。
- Monsters X
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接