Bootstrap input-group-addon icons for non-inputs

问题:

Bootstrap has a built-in icon for buttons: http://getbootstrap.com/components/#input-groups

I was wondering if it was possible to keep this style of icon, but not for inputs? For example I want to have an icon appear as part of the panel title in the same style: http://getbootstrap.com/components/#panels, and possible also to be able the change the background color of the icon section?

What I need: http://imgur.com/fRacpMa

So I guess this is not a built in functionality. How would I about building a CSS for this myself?

回答1:

Yes, see the Glyphicons section of the documentation. 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 to change the color.

.glyphicon {
    color: #ff0000;
}

回答2:

For everyone searching for similar solutions.

I have found this bootstrap snippet that modifies the panel behavior to work horizontally:

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