html - 在 CSS : rails 4 + bootstrap 3 中使用 glyphicon 作为背景图片

Question

我正在使用 Bootstrap 的 collapse.js 展开和折叠 Rails 应用程序中的一些输入组。我正在使用 JS 来确定组是否展开，并创建了 CSS 类来添加“+”或“-”以显示它是打开还是关闭:

打开:

关闭:

正如您从 CSS 中看到的那样，我在图像中使用了 png 背景图像:

.expandable {
  background: url('/assets/plus.png');
  padding-top: 4px;
  width: 400px;
  height: 30px;
  background-repeat: no-repeat;
  padding-left: 55px;
  display: block;
}

.expanded {
  background: url('/assets/minus.png');
  padding-top: 4px;
  width: 400px;
  height: 30px;
  background-repeat: no-repeat;
  padding-left: 55px;
  display: block;
}

我想使用 glyphicon-plus 和 glyphicon-minus 而不是这些 .png 文件。

完成此任务的最佳方法是什么？

更新:

为了获得正确的样式，我将 CSS 更改为:

.expandable {
  height:40px;
  width:50%;
  margin:6px;

}

.expandable:before{
  content:"\2b";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:5px;

}

.expanded {
  height:40px;
  width:50%;
  margin:6px;
}

.expanded:before{
  content:"\2212";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:5px;

}

作为引用，我的 HTML 是:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <p1 class="panel-title" >
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="expandable">
          Provider details 
        </a>
      <p2>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        blah, blah....

和 JS 来检测部分的打开/关闭:

$ ->
  $(".expandable").click () ->
    $this = $(this)
    if $this.hasClass("expandable")
      $this.removeClass("expandable").addClass "expanded"
    else $this.removeClass("expanded").addClass "expandable"  if $this.hasClass("expanded")
    return
  return

Answer 1

在这里，试试这个 Bootply 。这样就够了吗？

<div id="lol"></div>

---

#lol{
    height:40px;
    border:1px solid #555;
  width:50%;
  margin:30px;
}
#lol:before{
  content:"\2b";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:10px;
  display:inline-block;
}