我可以使用CSS为引导图标添加颜色吗？
Twitter的引导使用Glyphicons的图标 。 默认情况下它们是“ available in dark gray and white ”的：
是否有可能使用一些CSS技巧来改变图标的颜色？ 我希望有一些其他的CSS3辉煌，这将防止必须为每种颜色设置图标图像。
我知道你可以改变封闭（ <i> ）元素的背景颜色，但是我正在谈论图标的前景色。 我想这是可以反转图标图像的透明度，然后设置背景颜色。
那么，我可以使用CSS为引导图标添加颜色吗？
是的，如果您使用Bootstrap使用Font Awesome ！ 图标略有不同，但是它们更多，它们在任何尺寸上看起来都很棒，而且您可以更改它们的颜色。
基本上图标是字体，你可以改变它们的颜色，只需使用CSS颜色属性。 集成指令位于所提供链接的页面底部。
编辑： Bootstrap 3.0.0图标现在是字体！
正如其他一些人在Bootstrap 3.0.0的发布中也提到的那样，默认的图标字形现在是Font Awesome这样的字体，只需改变color CSS属性就可以改变color 。 更改大小可以通过font-size属性来完成。
使用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; }
Bootstrap 3 Glyphicons List
由于字形现在是字体，因此可以使用上下文类将适当的颜色应用于图标。
例如： <span class="glyphicon glyphicon-info-sign text-info"></span>将text-info添加到CSS将使图标成为蓝色。
使用不同颜色的引导程序图标的另一种方法是创build一个所需颜色的新.png（例如洋红色），并将其保存为/ path-to-bootstrap-css / img / glyphicons-halflings- magenta .png
在你的variables中find
// 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>
希望它可以帮助别人。
周围快速和肮脏的工作，而不是实际上着色的图标，但周围用标签或徽章在你想要的颜色;
<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>
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的“ Up and Running ”课程，或者观看使用自定义样式重写核心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>
瞧，绿色和红色的大拇指。
也适用于样式标签：
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span> <span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
其实很简单：
只是使用：
.icon-name{ color: #0C0;}
例如：
.icon-compass{ color: #C30;}
而已。
使用mask-image属性，但是这是一个黑客。 这里的Safari博客已经certificate了这一点 。
这里也对此进行了深入的描述。
基本上你会创build一个CSS框，说一个background-image: gradient(foo); 然后根据这些PNG图像应用图像蒙版。
这将节省您在Photoshop中制作单个图像的开发时间，但是我不认为这会节省很多带宽，除非您将以各种各样的颜色显示图像。 我个人不会使用它，因为你需要调整你的标记来有效地使用这个技术，但是我是“纯粹是不知情的”学派的成员。
接受的答案（使用字体真棒）是正确的。 但是因为我只是想要红色的变体显示validation错误，我结束了使用一个附加包，慷慨提供在这个网站上 。
只是在css文件中编辑urlpath，因为它们是绝对的（以/开头），我宁愿是相对的。 喜欢这个：
.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;}
您也可以在全球范围内更改颜色
即
.glyphicon { color: #008cba; }
我以为我可以将这个片段添加到这个旧post。 这是我以前在图标是字体之前所做的：
<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>元素为圆形。
只要使用GLYPHICONS ，你就可以改变颜色，只需设置CSS：
#myglyphcustom { color:#F00; }
