使用Bootstrap 2将glyphicons的颜色更改为某些但不是所有位置的蓝色
Mik*_*ils 149 html css twitter-bootstrap-2
我正在为我的UI使用Bootstrap框架.我想将我的glyphicons的颜色改为蓝色,但不是在所有地方.在某些地方,它应该使用默认颜色.
我已经提到了这两个链接,但我找不到任何有用的东西.
请注意:我使用的是Bootstrap 2.3.2.
Vik*_*dke 273
该图标将采用color其父级的css属性值的颜色.
您可以直接将其添加到样式中:
<span class="glyphicon glyphicon-user" style="color:blue"></span>
或者您可以将它作为一个类添加到您的图标,然后在CSS中设置它的字体颜色
HTML
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>
CSS
.blue {
color: blue;
}
这个小提琴有一个例子.
- 谢谢.我正在使用Bootstrap /2.3.2/.它对我不起作用. (5认同)
- @VikasGhodke,仍然需要将整个项目迁移到版本3. (2认同)
its*_*lay 184
只需text-success在Glyphicon上应用Twitter Bootstrap
类:
<span class="glyphicon glyphicon-play text-success">????? ??????</span>
可用颜色的完整列表:Bootstrap文档:帮助程序类
(也存在蓝色)
- *`началработу`是'开始工作'.我在飞行中写下答案,我并不认为它会被选为高票.因此,截图是我以前的应用程序用俄语制作的,以显示标记的外观. (7认同)
- 这样做更好,因为应用的颜色将符合当前的Bootstrap主题颜色方案 (6认同)
- 我发现如果图标必须显示得非常合适,因为操作成功了. (3认同)
- 为什么要把橘子和苹果混合？:\ (2认同)
- @naXa尝试`text-danger`。这是颜色的[完整列表]（https://getbootstrap.com/docs/4.0/utilities/colors/）。 (2认同)
Mik*_*ils 24
最后我找到了答案.要在2.3.2 bootstrap中添加新图标,我们必须在您的文件中添加Font Awsome css.执行此操作后,我们可以使用css覆盖样式以更改颜色和大小.
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
CSS
.brown{color:#9b846b}
如果我们想要更改图标的颜色,那么只需添加棕色类,图标将变为棕色.它还提供各种尺寸的图标.
HTML
<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
- 更新版本(本评论发布时为4.0.3)可在http://www.bootstrapcdn.com/#fontawesome_tab上找到 (2认同)
你也可以这样做,希望有所帮助
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
对于bootstrap 3.0,这对我有用:
.myclass .glyphicon {color:blue !important;}