blocks|key|3000920|text|图标将采用其父图标的color+css属性的值的颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3000921|您可以将此代码直接添加到样式中：|3000922|<span+class="glyphicon+glyphicon-user"+style="color:blue">|code-block|syntax|javascript|3000923|或者，您可以将其作为类添加到图标中，然后在CSS中为其设置字体颜色|3000924|HTML|3000925|<span+class="glyphicon+glyphicon-search">
<span+class="glyphicon+glyphicon-user+blue">
<span+class="glyphicon+glyphicon-trash">|3000926|CSS|3000927|.blue+{
++++color:+blue;
}|3000928|This+fiddle有一个例子。|3000929|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/S3R23/^0|A|5|0|0|0|0|0|0|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|Y|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

The icon will adopt the color from value of the <code>color</code> css property of it's parent.

You can either add this directly to the style:

<pre><code>&lt;span class="glyphicon glyphicon-user" style="color:blue"&gt;&lt;/span&gt;
</code></pre>

Or you can add it as a class to your icon and then set the font color to it in CSS

HTML 

<pre><code>&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
&lt;span class="glyphicon glyphicon-user blue"&gt;&lt;/span&gt;
&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
</code></pre>

CSS

<pre><code>.blue {
 color: blue;
}
</code></pre>

<a href="http://jsfiddle.net/S3R23/" rel="noreferrer">This fiddle</a> has an example.

blocks|key|3000934|text|最后我自己找到了答案。要在2.3.2+bootstrap中添加新图标，我们必须在您的文件中添加Font+Awsome+css。这样做之后，我们可以用css覆盖样式以更改颜色和大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3000935|<link+href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"+rel="stylesheet">|code-block|syntax|javascript|3000936|CSS|3000937|.brown{color:#9b846b}|3000938|如果我们想改变图标的颜色，那么只需添加棕色类，图标就会变成棕色。它还提供各种大小图标。|3000939|HTML|3000940|<i+class="icon-camera-retro+icon-large+brown">+icon-camera-retro+
<i+class="icon-camera-retro+icon-2x">+icon-camera-retro
<i+class="icon-camera-retro+icon-3x">+icon-camera-retro
<i+class="icon-camera-retro+icon-4x">+icon-camera-retro|3000941|entityMap|0|LINK|mutability|MUTABLE|url|http://fortawesome.github.io/Font-Awesome/^0|1B|B|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

Finally I found answer myself. To add new icons in 2.3.2 bootstrap we have to add <a href="http://fortawesome.github.io/Font-Awesome/">Font Awsome</a> css in you file. After doing this we can override the styles with css to change the color and size.

<pre><code>&lt;link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"&gt;
</code></pre>

CSS

<pre><code>.brown{color:#9b846b}
</code></pre>

If we want change the color of icon then just add brown class and icon will turn in brown color. It also provide icon of various size.

HTML

<pre><code>&lt;p&gt;&lt;i class="icon-camera-retro icon-large brown"&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt; &lt;!--brown class added--&gt;
&lt;p&gt;&lt;i class="icon-camera-retro icon-2x"&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
&lt;p&gt;&lt;i class="icon-camera-retro icon-3x"&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
&lt;p&gt;&lt;i class="icon-camera-retro icon-4x"&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
</code></pre>

blocks|key|178478|text|我创建了一个替代的colors+library+for+bootstrap+2.3.2，对于任何对旧的字形图标库有更多颜色感兴趣的人来说，它都是可用的，并且使用起来很简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|178479|entityMap|0|LINK|mutability|MUTABLE|url|http://www.devlifeline.com/2013/09/twitter-bootstrap-glyphicons-extended.html^0|9|Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I created an alternate <a href="http://www.devlifeline.com/2013/09/twitter-bootstrap-glyphicons-extended.html" rel="nofollow noreferrer">colors library for bootstrap 2.3.2</a> it's available and simple to use for anyone interested in more colors for the old glyphicons library.

blocks|key|181189|text|可以，您可以将图标设置为白色。这就是我的工作原理。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181190|Bootstrap+<3|offset|length|style|CODE|181191|HTML|181192|<i+class="icon-ok+icon-white">|code-block|syntax|javascript|181193|这将使您的图标显示为白色。|181194|entityMap^0|0|0|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Yes, you can set the icons to the white color. 
here is how it worked for me.

<code>Bootstrap &lt;3</code>

<h2>HTML</h2>

<pre><code>&lt;i class="icon-ok icon-white"&gt;&lt;/i&gt;
</code></pre>

This would make your icon appear white.

blocks|key|3001097|text|你也可以做到这一点，希望这会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001098|<span+style="color:black"><i+class="glyphicon+glyphicon-music">|code-block|syntax|javascript|3001099|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can do this as well, hopeit helps

<pre><code>&lt;span style="color:black"&gt;&lt;i class="glyphicon glyphicon-music"&gt;&lt;/i&gt;&lt;/span&gt;
</code></pre>

blocks|key|181210|text|只需在Glyphicon上应用Twitter+Bootstrap+text-success类：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|181211|<span+class="glyphicon+glyphicon-play+text-success">начал+работу|code-block|syntax|javascript|181212|​|181213|📷|atomic|181214|181215|可选颜色的完整列表：Bootstrap+Documentation:+Helper+classes|181216|(蓝色也存在)|181217|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/8a9ff7d11d4d001e86a38c7f7c89aa04.png|imageAlt|1|LINK|MUTABLE|url|https://getbootstrap.com/docs/4.0/utilities/colors/^0|X|C|0|0|0|0|1|0|0|0|A|13|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|P|3|L|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|S|3|T|5|6|7|1M|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11|12|-4]]|13|$5|14|Y|15|E|$16|17]]]]

Simply apply Twitter Bootstrap 
<code>text-success</code> class on Glyphicon:

<pre><code>&lt;span class="glyphicon glyphicon-play text-success"&gt;начал работу&lt;/span&gt;
</code></pre>

<img src="https://i.stack.imgur.com/b3nsy.png" alt="enter image description here">

Full list of available colors: <a href="https://getbootstrap.com/docs/4.0/utilities/colors/" rel="noreferrer">Bootstrap Documentation: Helper classes</a> 
(Blue is present also)

blocks|key|3001187|text|对于bootstrap+3.0，这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001188|.myclass+.glyphicon+{color:blue+!important;}|code-block|syntax|javascript|3001189|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For bootstrap 3.0, this worked for me:

<pre><code>.myclass .glyphicon {color:blue !important;}
</code></pre>

blocks|key|177190|text|如果它只是一个引导程序图标。注意，图标在文本下，或者更确切地说，在排版下面。只需像这样添加文本颜色类即可。例如text-primary、text-info等，依此类推到icon类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|177191|<i+class="icon+features-icon+icons8-collaboration-2+text-primary">
<i+class="icon+features-icon+icons8-collaboration-2+text-secondary">|code-block|syntax|javascript|177192|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If it is only a bootstrap icon. Note that icons are under text or rather typography. Just add the text color class like this. E.g text-primary, text-info and so on and so forth to the icon class:

<pre><code>&lt;i class="icon features-icon icons8-collaboration-2 text-primary"&gt;&lt;/i&gt;
&lt;i class="icon features-icon icons8-collaboration-2 text-secondary"&gt;&lt;/i&gt;
</code></pre>

blocks|key|3001222|text|Bootstrap+>=+v4.0删除的字形图标支持|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001223|3001224|删除了Glyphicons图标字体。如果您需要图标，可以选择以下选项：|blockquote|3001225|3001226|Glyphicons的上游版本|offset|length|3001227|Octicons|3001228|Font+Awesome|3001229|3001230|来源：https://v4-alpha.getbootstrap.com/migration/#components|3001231|如果您使用的是Bootstrap+>=+v4.0或更新版本，则可以使用现有的bootstrap样式类，如text-success、text-warning等。|style|CODE|3001232|例如，如果您使用的是fontawesome：|3001233|<i+class="fa+fa-tag+text-danger"+aria-hidden="true">|code-block|syntax|javascript|3001234|entityMap|0|LINK|mutability|MUTABLE|url|https://glyphicons.com/|1|https://octicons.github.com/|2|http://fontawesome.io/|3|https://v4-alpha.getbootstrap.com/migration/#components^0|0|0|0|0|0|A|0|0|0|8|1|0|0|C|2|0|0|3|1J|3|0|1G|C|1T|C|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1I|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|1K|8|@]|9|@$I|1L|J|1M|1|1N]]|A|$]]|$1|K|3|L|5|6|7|1O|8|@]|9|@$I|1P|J|1Q|1|1R]]|A|$]]|$1|M|3|N|5|6|7|1S|8|@]|9|@$I|1T|J|1U|1|1V]]|A|$]]|$1|O|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1X|8|@]|9|@$I|1Y|J|1Z|1|20]]|A|$]]|$1|R|3|S|5|6|7|21|8|@$I|22|J|23|T|U]|$I|24|J|25|T|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|26|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|27|8|@]|9|@]|A|$10|11]]|$1|12|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]|1A|$5|15|16|17|A|$18|1B]]|1C|$5|15|16|17|A|$18|1D]]|1E|$5|15|16|17|A|$18|1F]]]]

Bootstrap >= v4.0 dropped glyphicon support

<blockquote>
 Dropped the Glyphicons icon font. If you need icons, some options are:
 
 the upstream version of <a href="https://glyphicons.com/" rel="nofollow noreferrer">Glyphicons</a>
 
 <a href="https://octicons.github.com/" rel="nofollow noreferrer">Octicons</a>
 
 <a href="http://fontawesome.io/" rel="nofollow noreferrer">Font Awesome</a>
</blockquote>

Source: <a href="https://v4-alpha.getbootstrap.com/migration/#components" rel="nofollow noreferrer">https://v4-alpha.getbootstrap.com/migration/#components</a>

If you are using Bootstrap >= v4.0 or newer, you can use existing style classes of bootstrap such as <code>text-success</code>,<code>text-warning</code> etc.

For example, if you are using fontawesome:

<pre><code>&lt;i class="fa fa-tag text-danger" aria-hidden="true"&gt;&lt;/i&gt;
</code></pre>

blocks|key|3001245|text|CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001246|.blue-icon{
color:blue+!important;
}|code-block|syntax|javascript|3001247|HTML|3001248|<i+class="fa+fa-wrench+blue-icon">|3001249|Glyphicons在4.0中被移除了，我推荐Font-AWOW4或更高版本:)|3001250|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

CSS:

<pre><code>.blue-icon{
color:blue !important;
}
</code></pre>

HTML

<pre><code>&lt;i class="fa fa-wrench blue-icon"&gt;&lt;/i&gt;
</code></pre>

Glyphicons are removed in 4.0, i recommend Font-awesome 4 or newer :)

blocks|key|181273|text|前面所有的答案都是正确的，但是如果你只需要在一个地方使用一个图标来改变它的颜色，这里有一个简单而快速的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181274|+++<p+style="color:green">Time+icon:+<span+class="glyphicon+glyphicon-time"+>++|code-block|syntax|javascript|181275|​|181276|📷|atomic|offset|length|181277|181278|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/69d25d79726788bad86dd76801d74a4a.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

All previous answers are correct but here is a simple and quick way if you only need one icon in one place to change it's color:

<pre><code> &lt;p style="color:green"&gt;Time icon: &lt;span class="glyphicon glyphicon-time" &gt;&lt;/span&gt;&lt;/p&gt; 
</code></pre>

<a href="https://i.stack.imgur.com/yJLRh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yJLRh.png" alt="enter image description here"></a>

blocks|key|177273|text|颜色不起作用，如果你使用的是引导字体png图像，如我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|177274|[class%5E="icon-"],
[class*="+icon-"]+{
++display:+inline-block;
++width:+14px;
++height:+14px;
++margin-top:+1px;
++*margin-right:+.3em;
++line-height:+14px;
++vertical-align:+text-top;
++background-image:+url("../img/glyphicons-halflings.png");
++background-position:+14px+14px;
++background-repeat:+no-repeat;
}|code-block|syntax|javascript|177275|HTML5使用css+filter对图像进行着色，示例|177276|filter:+invert(100%25)++contrast(2)+brightness(50%25)+sepia(40%25)+saturate(450%25)+hue-rotate(-50deg);|177277|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Color not work, if you use for bootstrap font png image, as i.

<pre><code>[class^="icon-"],
[class*=" icon-"] {
 display: inline-block;
 width: 14px;
 height: 14px;
 margin-top: 1px;
 *margin-right: .3em;
 line-height: 14px;
 vertical-align: text-top;
 background-image: url("../img/glyphicons-halflings.png");
 background-position: 14px 14px;
 background-repeat: no-repeat;
}
</code></pre>

HTML5 use css filter to colorize image, example

<pre><code>filter: invert(100%) contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);
</code></pre>

I am using the Bootstrap framework for my UI. I want to change the color of my glyphicons to blue, but not in all places. In some places it should use the default color.

I have referred to these two links, but I am not finding anything helpful.

<ul>
<li><a href="https://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css">Can I add color to bootstrap icons only using CSS?</a></li>
<li><a href="https://stackoverflow.com/questions/18070322/how-do-i-change-bootstrap-3s-glyphicons-to-white">How do I change Bootstrap 3&#39;s glyphicons to white?</a></li>
</ul>

Please note: I am using Bootstrap 2.3.2.

Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2

我在我的UI中使用Bootstrap框架。我想把我的图标的颜色改成蓝色，但不是在所有地方。在某些地方，它应该使用默认颜色。我已经参考了这两个链接，但我没有找到任何有用的东西。请注意:我使用的是Bootstrap 2.3.2。

问使用Bootstrap 2在某些地方将图标的颜色更改为蓝色，但不是在所有位置
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Bootstrap 2在某些地方将图标的颜色更改为蓝色，但不是在所有位置EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Bootstrap 2在某些地方将图标的颜色更改为蓝色，但不是在所有位置
EN