html - glyphicon - icono dentro de input bootstrap

Usando glyphicon como imagen de fondo en CSS: rieles 4+bootstrap 3

Question

Estoy usando bootstrap''s collapse.js para expandir y contraer algunos grupos de entrada en una aplicación de Rails. Estoy usando JS para determinar si el grupo está expandido o no y he creado clases de CSS para agregar un "+" o "-" para mostrar si está abierto o cerrado:

Abierto:

Cerrado:

Como puede ver en el CSS, estoy usando una imagen de fondo que es un png dentro de mis imágenes:

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

Me gustaría usar glyphicon-plus y glyphicon-minus en lugar de estos archivos .png.

¿Cuál es la mejor manera de lograr esto?

Actualizado:

Para obtener el estilo adecuado, cambié el CSS a:

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

Y para referencia, mi HTML es:

<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....

Y JS para detectar la apertura / cierre de las secciones:

$ ->
$(".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

Aquí, prueba este Bootply . ¿Sería esto suficiente?

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

Answer 2

Hice algo similar para obtener un efecto de flecha, utilizando la posición absoluta para mover el glifo a donde lo quería:

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