iconos icono icon glyphicon font dentro con botones bootstrap awesome html css ruby-on-rails twitter-bootstrap glyphicons

html - glyphicon - icono dentro de input bootstrap



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

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


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


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