在 CSS 中使用 glyphicon 作为背景图像：rails 4 + bootstrap 3答案

【问题标题】：Using glyphicon as background image in CSS: rails 4 + bootstrap 3在 CSS 中使用 glyphicon 作为背景图像：rails 4 + bootstrap 3
【发布时间】：2014-04-11 05:55:53
【问题描述】：

我正在使用 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

【问题讨论】：

引导程序 2 还是引导程序 3？

标签： html css ruby-on-rails twitter-bootstrap glyphicons

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

【讨论】：

不幸的是，这似乎对我不起作用。打开折叠部分后，我还需要将“+”更改为“-”。
为什么这不起作用，你能解释一下吗？您也可以创建两个类。一个带+，另一个带减号，并相应地切换它们！
更正-如果我将它添加到我现有的 CSS 类（可扩展和扩展）中，这将非常有效。最初我试图将它们添加为一个新类。感谢您的帮助！

【解决方案2】：

我做了类似的事情来获得箭头效果，使用绝对定位将字形移动到我想要的位置：

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

        padding-right: 25px;
    }

【讨论】：