title: Using glyphicon as background image in CSS: rails 4 + bootstrap 3
body: <p>I'm using bootstrap's collapse.js to expand and collapse some input groups in a rails app.  I'm using JS to determine if the group is expanded or not and have created CSS classes to add a "+" or "-" to show whether it's open or closed:</p>
  
  <p>Open:
  <img src="https://i.stack.imgur.com/rJxVb.png" alt="enter image description here"></p>
  
  <p>Closed:
  <img src="https://i.stack.imgur.com/vh6rj.png" alt="enter image description here"></p>
  
  <p>As you can see from the CSS, I'm using a background image that's a png within my images:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I would like to use the glyphicon-plus and glyphicon-minus instead of these .png files.  </p>
  
  <p>What's the best way to accomplish this?</p>
  
  <p><strong>Updated:</strong></p>
  
  <p>In order to get the proper styling, I changed the CSS to:</p>
  
  <pre><code>.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;
  
  }
  </code></pre>
  
  <p>And for reference, my HTML is:</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;p1 class="panel-title" &gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="expandable"&gt;
            Provider details 
          &lt;/a&gt;
        &lt;p2&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          blah, blah....
  </code></pre>
  
  <p>And JS to detect the opening/closing of the sections:</p>
  
  <pre><code>$ -&gt;
    $(".expandable").click () -&gt;
      $this = $(this)
      if $this.hasClass("expandable")
        $this.removeClass("expandable").addClass "expanded"
      else $this.removeClass("expanded").addClass "expandable"  if $this.hasClass("expanded")
      return
    return
  </code></pre>