我可以仅使用 CSS 为引导程序图标添加颜色吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12379153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I add color to bootstrap icons only using CSS?
提问by cwd
Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default:
Twitter 的引导程序使用 Glyphicons 的 Icons。它们available in dark gray and white默认为“ ”：
Is it possible to use some CSS trickery to change the colors of the icons? I was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color.
是否可以使用一些 CSS 技巧来更改图标的颜色？我希望有一些其他的 css3 辉煌可以防止必须为每种颜色设置一个图标图像。
I know you can change the background color of the enclosing (<i>) element, but I'm talking about the icon foreground color. I guess it would be possible to inverse the transparency on the icon image and then set the background color.
我知道您可以更改封闭 ( <i>) 元素的背景颜色，但我说的是图标前景色。我想可以反转图标图像的透明度，然后设置背景颜色。
So, can I add color to bootstrap icons only using CSS?
那么，我可以仅使用 CSS 为引导程序图标添加颜色吗？
回答by hajpoj
Yes, if you use Font Awesomewith Bootstrap! The icons are slightly different, but there are more of them, they look great at any size, and you can change the colors of them.
是的，如果你在 Bootstrap 中使用Font Awesome！图标略有不同，但还有更多，它们在任何尺寸下看起来都很棒，并且您可以更改它们的颜色。
Basically the icons are fonts and you can change the color of them just with the CSS color property. Integration instructions are at the bottom of the page in the provided link.
基本上图标是字体，您可以使用 CSS color 属性更改它们的颜色。集成说明位于页面底部提供的链接中。
Edit:Bootstrap 3.0.0 icons are now fonts!
编辑：Bootstrap 3.0.0 图标现在是字体！
As some other people have also mentioned with the release of Bootstrap 3.0.0, the default icon glyphsare now fonts like Font Awesome, and the color can be changed simply by changing the colorCSS property. Changing the size can be done via font-sizeproperty.
正如其他一些人在 Bootstrap 3.0.0 发布时也提到的，默认图标字形现在是像 Font Awesome 这样的字体，并且可以通过更改colorCSS 属性来更改颜色。可以通过font-size属性更改大小。
回答by fseminario
With the latest release of Bootstrap RC 3, changing the color of the icons is as simple as adding a class with the color you want and adding it to the span.
在最新版本的 Bootstrap RC 3 中，更改图标的颜色就像添加具有所需颜色的类并将其添加到跨度一样简单。
Default black color:
默认黑色：
<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>
would become
会成为
<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>
CSS
CSS
.icon-success {
color: #5CB85C;
}
回答by truncie
Because the glyphicons are now fonts, one can use the contextual classesto apply the appropriate color to the icons.
由于字形现在是字体，因此可以使用上下文类将适当的颜色应用于图标。
For example:
<span class="glyphicon glyphicon-info-sign text-info"></span>adding text-infoto the css will make the icon the info blue color.
例如：
<span class="glyphicon glyphicon-info-sign text-info"></span>添加text-info到 css 将使图标的信息为蓝色。
回答by Sepp Ludger
Another possible way to have bootstrap icons in a different color is to create a new .png in the desired color, (eg. magenta) and save it as /path-to-bootstrap-css/img/glyphicons-halflings-magenta.png
使用不同颜色的引导程序图标的另一种可能方法是创建一个所需颜色的新 .png（例如洋红色）并将其保存为 /path-to-bootstrap-css/img/glyphicons-halflings- magenta.png
In your variables.lessfind
在你的variables.less 中找到
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
and add this line
并添加这一行
@iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png";
In your sprites.lessadd
在你的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}");
}
And use it like this:
并像这样使用它：
<i class='icon-chevron-down icon-magenta'></i>
Hope it helps someone.
希望它可以帮助某人。
回答by frbl
Quick and dirty work around which did it for me, not actually coloring the icon, but surrounding it with a label or badge in the color you want;
为我所做的快速而肮脏的工作，实际上不是为图标着色，而是用您想要的颜色的标签或徽章围绕它；
<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>
回答by Eugene
The Bootstrap Glyphicons are fonts. This means it can be changed like any other text through CSS styling.
Bootstrap Glyphicons 是字体。这意味着它可以像任何其他文本一样通过 CSS 样式进行更改。
CSS:
CSS：
<style>
.glyphicon-plus {
color: #F00;
}
</style>
HTML:
HTML：
<span class="glyphicon glyphicon-plus"></span>
Example:
例子：
<!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>
Watch the course Up and Running with Bootstrap 3by Jen Kramer, or watch the individual lesson on Overriding core CSS with custom styles.
观看Jen Kramer 的“使用 Bootstrap 3 启动和运行”课程，或观看关于使用自定义样式覆盖核心 CSS的单独课程。
回答by joan16v
Also works with the style tag:
也适用于 style 标签：
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>
<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
回答by Monsters X
This is all a bit roundabout..
这有点绕。。
I've used the glyphs like this
我用过这样的字形
</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>
and to affect the color, i included a bit of css at the head like this
为了影响颜色，我在头部加入了一些 css 像这样
<style>
i.green:before {
color: green;
}
i.red:before {
color: red;
}
</style>
Voila, green and red thumbs.
瞧，绿色和红色的拇指。
回答by Aniruddh Dixit
It is actually very easy:
其实很简单：
just use:
只需使用：
.icon-name{
color: #0C0;}
For example:
例如：
.icon-compass{
color: #C30;}
That's it.
就是这样。
回答by Dai
Use the mask-imageproperty, but it's a bit of a hack. It's demonstrated in the Safari blog here.
使用该mask-image属性，但它有点黑客。此处的 Safari 博客中对此进行了演示。
It's also described in-depth here.
此处也对其进行了深入描述。
Basically you'd create a CSS box, with say a background-image: gradient(foo);and then apply an image mask to it based on those PNG images.
基本上，您将创建一个 CSS 框，例如 a background-image: gradient(foo);，然后根据这些 PNG 图像对其应用图像蒙版。
It would save you development time making individual images in Photoshop, but I don't think it would save much bandwidth unless you'll be displaying the images in a wide variety of colours. Personally I wouldn't use it because you need to adjust your markup to use the technique effectively, but I'm a member of the "purity is imperitive" school-of-thought.
它可以节省您在 Photoshop 中制作单个图像的开发时间，但我认为它不会节省太多带宽，除非您将以多种颜色显示图像。就我个人而言，我不会使用它，因为您需要调整标记以有效地使用该技术，但我是“纯粹是必不可少的”思想流派的成员。
