是否可以仅使用CSS将颜色添加到引导图标？

159

Twitter的引导程序使用Glyphicons的Icons。它们available in dark gray and white默认为“ ”：

图片-58.png

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

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

因此，是否可以仅使用CSS为引导图标添加颜色？

— 电脑
source

我不这么认为...但是您可能可以使用javascript和canvas元素来做到这一点。

— bfavaretto 2012年

@bfavaretto-您能详细说明吗？您是说想出代码/坐标来绘制每个图标还是以某种方式使用现有的png图像？

— cwd 2012年

1

抱歉，我对canvas元素的经验不足，无法建议您编写代码，但是我知道您可以使用画布单独操作像素。

— bfavaretto 2012年

189

是的，如果您在Bootstrap中使用Font Awesome！图标略有不同，但是有更多图标，无论大小如何，它们的外观都很漂亮，您可以更改它们的颜色。

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

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

正如其他人在Bootstrap 3.0.0版本中提到的那样，默认的图标字形现在是诸如Font Awesome之类的字体，并且可以通过更改colorCSS属性来更改颜色。可以通过font-size属性来更改大小。

— 朝j
source

9

啊，聪明！不要忘记进行设置，cursor: default;以使用户看不到I-Bar。：此外，检查出FF查特韦尔，一个真正聪明的字体tktype.com/chartwell.php

— 戴

4

当您将鼠标悬停在文本上时（例如在文字处理程序中），光标看起来像是一个超大写的大写“ I”字符，它用于选择文本。在CSS中，它称为cursor: text;。也称为“工字梁”。

— 2012年

38

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

— fseminario
source

17

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

例如：  添加text-info到CSS将使图标的信息变为蓝色。

— 截短
source

感谢您正在寻找一种应用上下文类的方法。任何text **上下文类都可以使用

— Dustin Hodges

14

使用不同颜色的引导程序图标的另一种可能方法是，以所需的颜色（例如，洋红色）创建新的.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}");
}

并像这样使用它：

<i class='icon-chevron-down icon-magenta'></i>

希望它能帮助某人。

— 塞普·卢杰
source

5

只是想重申I was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd 2012年

也不能完全通过跨浏览器兼容的CSS来完成。通常，人们需要带有相关图标的配色方案-所以我要说最多5种颜色并不是什么挑战。

— foxybagga

@seppludger如何创建新的彩色半身人精灵？你成功做到了吗？如果在任何图形编辑器中加载颜色，则无法更改颜色。

— 诺曼

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>

— frbl
source

您的答案非常有用，+ 1。我想使用编辑图标，并希望将颜色设置为黄色。你能告诉我怎么做吗？

好吧，您可以将图标更改为其他名称。例如 icon-white”> 。例如： 。这是更好地去为新的引导IMO ..

— frbl

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

— 尤金
source

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>

瞧，绿色和红色的拇指。

— 怪兽X
source

4

也可用于样式标签：

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

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

在此处输入图片说明

— 琼16v
source

3

实际上很简单：

只需使用：

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

例如：

.icon-compass{
color: #C30;}

而已。

— Aniruddh Dixit
source

3

使用该mask-image属性，但这有点hack。此处的Safari博客对此进行了演示。

这里也有详细介绍。

基本上，您将创建一个CSS框，并说a background-image: gradient(foo);，然后基于这些PNG图像对其应用图像蒙版。

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

— 戴
source

1

请记住，对该mask-image物业的支持不是那么好。

— Scott Bartell 2012年

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

— mpp文件
source

最后，与老版本的引导的一个兼容

— 梅德金兹伯格

1

您也可以全局更改颜色

即

 .glyphicon {
       color: #008cba; 
   }

— 开发者
source

1

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

#myglyphcustom {
    color:#F00;
}

— 瓦尔特·洛兰
source

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的偷偷摸摸的答案非常相似，但是它不使用其他图像。而是将元素的背景色设置为，white并使用CSS属性border-radius将整个元素“四舍五入”。如果您注意到，border-radius（7.5px）的值恰好是widthand height属性的值的一半（均为15px，使图标为正方形），从而使元素变为圆形。

— Web流浪者
source