html - 非输入的 Bootstrap 输入组插件图标

Question

Bootstrap 有一个内置的按钮图标:http://getbootstrap.com/components/#input-groups

我想知道是否可以保留这种风格的图标，但不能用于输入？例如，我想让一个图标以相同的样式显示为面板标题的一部分:http://getbootstrap.com/components/#panels , 还有可能改变图标部分的背景颜色吗？

我需要的是:http://imgur.com/fRacpMa

所以我想这不是内置功能。我自己为此构建一个 CSS 怎么样？

Answer 1

是的，请参阅 Glyphicons文档的一部分。 Demo

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"><span class="glyphicon glyphicon-music"></span> Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

CSS 改变颜色。

.glyphicon {
    color: #ff0000;
}