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:

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?

标签： css twitter-bootstrap sprite css-sprites

14条回答

迷人小祖宗

2楼-- · 2020-01-25 04:47

With the latest release of Bootstrap RC 3, changing the color of the icons is as simple as adding a class with the color you want and adding it to the span.

Default black color:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

would become

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Bootstrap 3 Glyphicons List

0人赞添加讨论(0) 举报

祖国的老花朵

3楼-- · 2020-01-25 04:48

Another possible way to have bootstrap icons in a different color is to create a new .png in the desired color, (eg. magenta) and save it as /path-to-bootstrap-css/img/glyphicons-halflings-magenta.png

In your variables.less find

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

and add this line

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

In your sprites.less add

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

And use it like this:

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

Hope it helps someone.

0人赞添加讨论(0) 举报

做个烂人

4楼-- · 2020-01-25 04:48

Quick and dirty work around which did it for me, not actually coloring the icon, but surrounding it with a label or badge in the color you want;

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

0人赞添加讨论(0) 举报

劳资没心，怎么记你

5楼-- · 2020-01-25 04:48

It is actually very easy:

just use:

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

For example:

.icon-compass{
color: #C30;}

That's it.

0人赞添加讨论(0) 举报

Animai°情兽

6楼-- · 2020-01-25 04:48

You can change color globally as well

i.e.

 .glyphicon {
       color: #008cba; 
   }

0人赞添加讨论(0) 举报

仙女界的扛把子

7楼-- · 2020-01-25 04:51

The Bootstrap Glyphicons are fonts. This means it can be changed like any other text through CSS styling.

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

Example:

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

Watch the course Up and Running with Bootstrap 3 by Jen Kramer, or watch the individual lesson on Overriding core CSS with custom styles.

0人赞添加讨论(0) 举报

1 2 3 下一页

Can I add color to bootstrap icons only using CSS?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间