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

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

图片-58.png

是否有可能使用一些CSS技巧来改变图标的​​颜色? 我希望有一些其他的CSS3辉煌,这将防止必须为每种颜色设置图标图像。

我知道你可以改变封闭( <i> )元素的背景颜色,但是我正在谈论图标的前景色。 我想这是可以反转图标图像的透明度,然后设置背景颜色。

那么,我可以使用CSS为引导图标添加颜色吗?

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

基本上图标是字体,你可以改变它们的颜色,只需使用CSS颜色属性。 集成指令位于所提供链接的页面底部。


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

正如其他一些人在Bootstrap 3.0.0的发布中也提到的那样,默认的图标字形现在是Font Awesome这样的字体,只需改变color CSS属性就可以改变color 。 更改大小可以通过font-size属性来完成。

使用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

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

例如: <span class="glyphicon glyphicon-info-sign text-info"></span>text-info添加到CSS将使图标成为蓝色。

使用不同颜色的引导程序图标的另一种方法是创build一个所需颜色的新.png(例如洋红色),并将其保存为/ path-to-bootstrap-css / img / glyphicons-halflings- magenta .png

在你的variables中find

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

希望它可以帮助别人。

周围快速和肮脏的工作,而不是实际上着色的图标,但周围用标签或徽章在你想要的颜色;

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

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的“ Up and Running ”课程,或者观看使用自定义样式重写核心CSS的单独课程。

这一切都有点迂回

我已经使用了这样的字形

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

瞧,绿色和红色的大拇指。

也适用于样式标签:

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

在这里输入图像描述

其实很简单:

只是使用:

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

例如:

 .icon-compass{ color: #C30;} 

而已。

使用mask-image属性,但是这是一个黑客。 这里的Safari博客已经certificate了这一点 。

这里也对此进行了深入的描述。

基本上你会创build一个CSS框,说一个background-image: gradient(foo); 然后根据这些PNG图像应用图像蒙版。

这将节省您在Photoshop中制作单个图像的开发时间,但是我不认为这会节省很多带宽,除非您将以各种各样的颜色显示图像。 我个人不会使用它,因为你需要调整你的标记来有效地使用这个技术,但是我是“纯粹是不知情的”学派的成员。

接受的答案(使用字体真棒)是正确的。 但是因为我只是想要红色的变体显示validation错误,我结束了使用一个附加包,慷慨提供在这个网站上 。

只是在css文件中编辑urlpath,因为它们是绝对的(以/开头),我宁愿是相对的。 喜欢这个:

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

您也可以在全球范围内更改颜色

  .glyphicon { color: #008cba; } 

我以为我可以将这个片段添加到这个旧post。 这是我以前在图标是字体之前所做的:

 <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)的值恰好是widthheight属性的一半(均为15px,使图标为正方形),使得<i>元素为圆形。

只要使用GLYPHICONS ,你就可以改变颜色,只需设置CSS:

 #myglyphcustom { color:#F00; }