在CSS中使用glyphicon作为背景图像：Rails 4 + Bootstrap 3

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

- dmt2989

---

Bootstrap 2 还是 Bootstrap 3？ - Ilan Biala

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;
}

- Lokesh Suthar

---

不幸的是，这对我似乎不起作用。一旦折叠部分被打开，我还需要将“+”更改为“-”。 - dmt2989

为什么这个不起作用，你能解释一下吗？同时，您可以创建两个类。一个带有加号，另一个带有减号，并相应地切换它们！！ - Lokesh Suthar

更正- 如果我将它添加到我的现有CSS类（可扩展和已展开）中，它就可以完美地工作。最初，我尝试将它们作为新类添加。感谢您的帮助！ - dmt2989

Answer 2

我做了类似的事情，使用绝对定位将图标移到所需位置，以达到指向箭头效果：

    li.arrow {
        &:after {
            content:"\e080";
            font-family:"Glyphicons Halflings";
            position: absolute;
            right: 15px;
            top: 10px;
        }

        padding-right: 25px;
    }

- 1800 INFORMATION