【问题标题】:Bootstrap 3 glyphicon white backgroundBootstrap 3 glyphicon 白色背景
【发布时间】:2014-05-15 20:35:11
【问题描述】:
在引导程序 3 中,使字形图标具有白色背景而不是正常背景的咒语是什么,灰色背景?当然,他们已经内置了它,我只是还没有找到它。一般来说,我在将现有的 angularjs 项目切换到 bootstrap 3 时遇到了很多痛苦。许多看似随意的差异。
请注意,这是为了使背景“白色”而不是图标本身。一个相关的问题是是否有一种内置方法可以为字形图标获得透明背景。
【问题讨论】:
标签:
twitter-bootstrap-3
glyphicons
【解决方案1】:
您可以定义自己的自定义 CSS 样式。
HTML
<button class="btn btn-lg btn-custom" type="button">
<span class="glyphicon glyphicon-star"></span>
</button>
CSS
.btn-custom {
background-color: #FFFFFF;
border-color: #CCCCCC;
color: #333333;
}
.btn-custom:hover {
background-color: #000;
border-color: #fff;
color: #333333;
}
这是一个小提琴 - http://www.bootply.com/pmyZvM3iOq
使背景透明;只需使用background-color: transparent;