非输入的引导输入组插件图标答案

【问题标题】：Bootstrap input-group-addon icons for non-inputs非输入的引导输入组插件图标
【发布时间】：2014-06-24 15:33:17
【问题描述】：

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

我想知道是否可以保留这种图标样式，但不能用于输入？例如，我想让一个图标作为面板标题的一部分以相同的样式出现：http://getbootstrap.com/components/#panels，并且还可以更改图标部分的背景颜色？

我需要什么：http://imgur.com/fRacpMa

所以我猜这不是内置功能。我将如何为自己构建一个 CSS？

【问题讨论】：

stackoverflow.com/questions/40974864/… 也许这会有所帮助？

标签： html css twitter-bootstrap icons

【解决方案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;
}

【讨论】：

感谢您的回复。我知道我可以在面板标题中添加图标；我特别在寻找与他们的输入插件图标风格相同的东西，在图标和标题文本之间有一条分隔线。我还希望能够更改标题栏图标部分的背景颜色，而不是图标本身。请看我附上的图片。
它不是内置功能...您必须自己创建它。

【解决方案2】：

适合所有寻找类似解决方案的人。

我发现这个引导程序 sn-p 可以修改面板行为以水平工作：

http://bootsnipp.com/snippets/featured/panel-horizontal

【讨论】：