我可以只使用 CSS 为引导图标添加颜色吗？答案

【问题标题】：Can I add color to bootstrap icons only using CSS?我可以只使用 CSS 为引导图标添加颜色吗？
【发布时间】：2012-09-04 22:34:48
【问题描述】：

Twitter's bootstrap uses Icons by Glyphicons。默认为“available in dark gray and white”：

是否可以使用一些 CSS 技巧来更改图标的颜色？我希望有一些其他的 css3 光彩，可以避免必须为每种颜色设置图标图像。

我知道您可以更改封闭 () 元素的背景颜色，但我说的是图标前景色。我想可以反转图标图像的透明度，然后设置背景颜色。

那么，我可以只使用 CSS 为引导图标添加颜色吗？

【问题讨论】：

我不这么认为...但是您可以使用 javascript 和 canvas 元素来做到这一点。
@bfavaretto - 你能详细说明一下吗？你的意思是想出代码/坐标来绘制每个图标或以某种方式使用现有的 png 图像？
抱歉，我对画布元素的经验不够，无法建议您编写代码，但我知道您可以使用画布单独操作像素。

标签： css twitter-bootstrap sprite css-sprites

【解决方案1】：

是的，如果您将 Font Awesome 与 Bootstrap 一起使用！图标略有不同，但数量更多，无论大小如何，它们看起来都很棒，而且您可以更改它们的颜色。

基本上，图标是字体，您可以通过 CSS color 属性更改它们的颜色。集成说明位于页面底部提供的链接中。

编辑：Bootstrap 3.0.0 图标现在是字体！

正如其他一些人在发布 Bootstrap 3.0.0 时也提到的那样，默认的 icon glyphs 现在是 Font Awesome 之类的字体，只需更改 color CSS 属性即可更改颜色。可以通过font-size 属性更改大小。

【讨论】：

啊，聪明！不要忘记设置cursor: default;，这样用户就看不到 I-Bar。另外，查看 FF Chartwell，一个非常聪明的字体：tktype.com/chartwell.php
当您将鼠标悬停在文本上时（如在文字处理器中），您的光标看起来像一个超大的大写“I”字符，它用于选择文本。在 CSS 中它被称为cursor: text;。它也被称为“工字梁”。

【解决方案2】：

使用最新版本的 Bootstrap RC 3，更改图标的颜色就像添加具有所需颜色的类并将其添加到 span 一样简单。

默认黑色：

<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;
}

Bootstrap 3 Glyphicons List

【讨论】：

【解决方案3】：

因为字形现在是字体，所以可以使用contextual classes 为图标应用适当的颜色。

例如：  在 CSS 中添加 text-info 将使图标变为蓝色。

【讨论】：

感谢正在寻找一种应用上下文类的方法。任何 text-* 上下文类都可以工作

【解决方案4】：

另一种使用不同颜色的引导图标的可能方法是创建一个所需颜色的新 .png（例如洋红色）并将其保存为 /path-to-bootstrap-css/img/glyphicons-halflings- 洋红色.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>

希望对某人有所帮助。

【讨论】：

只是想重申I was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color
不能完全通过跨浏览器兼容的 CSS 来完成。通常人们需要一个带有相关图标的配色方案 - 所以我会说最多 5 个颜色集并不是什么挑战。
@seppludger 你如何创建一个新的彩色半身人精灵？你成功地做到了这一点吗？如果我在任何图形编辑器中加载它们，我将无法更改颜色。

【解决方案5】：

为我完成的快速而肮脏的工作，实际上不是为图标着色，而是用你想要的颜色的标签或徽章围绕它；

<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>

【讨论】：

你的回答很有用，+1。我想用编辑图标，想把黄色。你能告诉我怎么做吗？
好吧，您可以将图标-ok更改为其他内容；例如。例如：。最好选择新的引导程序 imo ..

【解决方案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 的课程 Up and Running with Bootstrap 3，或观看 Overriding core CSS with custom styles 的个人课程。

【讨论】：

【解决方案7】：

这有点迂回..

我用过这样的字形

  </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>

瞧，绿色和红色拇指。

【讨论】：

【解决方案8】：

也适用于样式标签：

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

【讨论】：

【解决方案9】：

其实很简单：

只需使用：

.icon-name{
color: #0C0;}

例如：

.icon-compass{
color: #C30;}

就是这样。

【讨论】：

【解决方案10】：

使用mask-image 属性，但这有点小技巧。它在 Safari 博客 here 中进行了演示。

也有深入描述here。

基本上你会创建一个 CSS 框，比如 background-image: gradient(foo);，然后根据这些 PNG 图像对其应用图像蒙版。

这可以节省您在 Photoshop 中制作单个图像的开发时间，但我认为除非您以多种颜色显示图像，否则它不会节省太多带宽。就我个人而言，我不会使用它，因为您需要调整标记以有效地使用该技术，但我是“纯度是必然的”学派的成员。

【讨论】：

请记住对 mask-image 属性 isn't that great 的支持。

【解决方案11】：

接受的答案（使用令人敬畏的字体）是正确的答案。但由于我只是想让红色变体显示在验证错误上，我最终使用了一个插件包，请提供on this site。

刚刚编辑了 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的一款

【解决方案12】：

您也可以全局更改颜色

即

 .glyphicon {
       color: #008cba; 
   }

【讨论】：

【解决方案13】：

只需使用GLYPHICONS，您只需设置 CSS 即可更改颜色：

#myglyphcustom {
    color:#F00;
}

【讨论】：

【解决方案14】：

我想我可以将这个 sn-p 添加到这个旧帖子中。这是我过去在图标成为字体之前所做的：

<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 的偷偷摸摸的答案非常相似，但它不使用其他图像。相反，这会将 元素的背景颜色设置为white，并使用CSS 属性border-radius 使整个 元素“圆润”。如果你注意到了，border-radius (7.5px) 的值正好是 width 和 height 属性值的一半（都是 15px，使图标变成正方形），使  元素成为圆形。

【讨论】：