Can I add color to bootstrap icons only using CSS?

Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default:

Picture-58.png

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.

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.

So, can I add color to bootstrap icons only using CSS?

254101 次浏览
小开

使用 mask-image属性，但是它有点像黑客技术，在 Safari 博客 给你中有演示。

它还深入描述了 给你。

基本上，您可以创建一个 CSS 框，比如 background-image: gradient(foo);，然后根据这些 PNG 图像应用一个图像掩码。

它可以节省你在 Photoshop 中制作单个图像的开发时间，但我不认为它会节省很多带宽，除非你将显示各种颜色的图像。就个人而言，我不会使用它，因为您需要调整您的标记来有效地使用该技术，但我是“纯粹是专横的”学派思想的一员。

小开
最佳答案

是的，如果您使用 超赞字体与 Bootstrap！这些图标略有不同，但是有更多的图标，它们在任何尺寸下看起来都很棒，你可以改变它们的颜色。

基本上图标就是字体，你可以通过 CSS 颜色属性来改变它们的颜色。集成说明在页面底部提供的链接中。

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

正如其他一些人在 Bootstrap 3.0.0版本中提到的，默认的 图标符号现在是像 Font Awesome 这样的字体，而且颜色可以通过改变 color CSS 属性来简单地改变。可以通过 font-size属性更改大小。

小开

另一种使引导程序图标具有不同颜色的可能方法是创建一个新的。Png，并将其保存为/path-to-bootstrap-css/img/glyphicon-halflings-洋红色。砰

在你的 变量更少发现

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

加上这一行

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

在你的 精灵，少点添加

/* 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>
小开

只要使用 图形，你就可以改变颜色，只需设置 CSS:

#myglyphcustom {
color:#F00;
}
小开

其实很简单:

使用:

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

例如:

.icon-compass{
color: #C30;}

就是这样。

小开

这有点拐弯抹角。

我用过这样的象形文字

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

瞧，绿色和红色的拇指。

小开

在最新发布的 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;
}

引导3字形列表

小开

引导字符是字体。这意味着它可以像任何其他文本一样通过 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>


观看课程 启动并运行 Bootstrap 3的珍克莱默，或观看个人课程的 用自定义样式覆盖核心 CSS。

小开

公认的答案(使用字体真棒)是正确的。但是，因为我只是希望红色的变体显示在验证错误，我结束使用一个插件包，友好地提供 在这个网站上。

只是编辑了 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;}
小开

因为字形现在是字体，所以可以使用 上下文类别对图标应用适当的颜色。

例如: <span class="glyphicon glyphicon-info-sign text-info"></span> 将 text-info添加到 css 将使图标的信息蓝色。

小开

您还可以在全局范围内更改颜色

也就是说。

 .glyphicon {
color: #008cba;
}
小开

我想我可以把这个片段添加到这篇旧文章中。 这是我过去在图标成为字体之前所做的事情:

<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.5 px)正好是 width和 height属性值的一半(两者都是15px，使图标成正方形) ，使得 <i>元素成圆形。

小开

也可以使用 style 标签:

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


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

enter image description here


提交答案