162

Twitter 的引导程序使用 Glyphicons 的图标。默认情况下它们是“ available in dark gray and white”：

图片-58.png

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

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

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

4

14 回答 14

190

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

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

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

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

于 2012-09-11T23:33:50.267 回答
39

使用最新版本的 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 字形图标列表

于 2013-08-29T20:36:27.680 回答
18

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

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

于 2014-05-22T20:25:14.100 回答
14

使引导图标具有不同颜色的另一种可能方法是创建一个所需颜色的新.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>

希望它可以帮助某人。

于 2012-11-12T14:25:56.237 回答
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>
于 2013-04-17T12:19:36.607 回答
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的个人课程。

于 2014-02-04T13:39:32.157 回答
4

这有点迂回..

我用过这样的字形

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

瞧，绿色和红色拇指。

于 2013-08-28T20:17:10.533 回答
4

也适用于样式标签：

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

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

在此处输入图像描述

于 2015-01-19T11:28:45.707 回答
3

使用该mask-image属性，但它有点黑客。它在此处的 Safari 博客中进行了演示。

此处也对其进行了深入描述。

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

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

于 2012-09-11T23:14:43.153 回答
3

其实很简单：

只需使用：

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

例如：

.icon-compass{
color: #C30;}

就是这样。

于 2013-08-28T12:33:51.367 回答
1

只需使用GLYPHICONS，您就可以通过设置 CSS 来更改颜色：

#myglyphcustom {
    color:#F00;
}
于 2013-08-12T13:28:09.397 回答
1

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

刚刚编辑了 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;}
于 2014-05-02T16:17:01.163 回答
1

您也可以全局更改颜色

IE

 .glyphicon {
       color: #008cba; 
   }
于 2014-07-23T17:46:30.963 回答
0

我想我可以将这个片段添加到这个旧帖子中。这是我过去所做的，在图标是字体之前：

<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) 的值正好是widthandheight属性的一半（都是 15px，使图标变成正方形），使<i>元素成为圆形。

于 2014-11-10T16:23:28.947 回答