Question

Twitter's bootstrap uses Icons by Glyphicons。默认情况下，它们为“available in dark gray and white”：

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

我知道您可以更改封闭（）元素的背景颜色，但我在谈论图标前景色。我想可以反转图标图像上的透明度，然后设置背景颜色。

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

Answer 1

是的，如果您使用Bootstrap Font Awesome！图标略有不同，但有更多图标，它们在任何尺寸下看起来都很棒，您可以更改它们的颜色。

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

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

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

Answer 2

使用最新版本的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

Answer 3

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

例如：  将text-info添加到css将使图标成为信息蓝色。

Answer 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}"); }

并像这样使用它：



希望它有所帮助。

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

Answer 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上的单独课程。

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

Voila，绿色和红色拇指。

Answer 8

也适用于样式标记：

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

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

enter image description here

Answer 9

使用mask-image属性，但这有点像黑客攻击。它已在Safari博客here中展示。

还深入介绍了here。

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

它可以节省您在Photoshop中制作单个图像的开发时间，但我不认为它会节省太多带宽，除非您将以各种颜色显示图像。我个人不会使用它，因为你需要调整你的标记以有效地使用这种技术，但我是“纯洁是不可能的”思想学校的成员。

Answer 10

实际上很容易：

只需使用：

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

例如：

.icon-compass{
color: #C30;}

就是这样。

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

Answer 12

您也可以全局更改颜色

即

 .glyphicon {
       color: #008cba; 
   }

Answer 13

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

#myglyphcustom {
    color:#F00;
}

Answer 14

我认为我可能会将此片段添加到此旧帖子中。这是我过去所做的，在图标是字体之前：

<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使整个元素＆＃34;舍入。＆＃ 34;如果您注意到，border-radius（7.5px）的值恰好是width和height属性的一半（均为15px，使图标成为方形），使{{1元素循环。

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

14 个答案: