web-dev-qa-db-fra.com

Utiliser le glyphicon comme image de fond en CSS: Rails 4 + bootstrap 3

J'utilise collapse.js de bootstrap pour développer et réduire certains groupes d'entrée dans une application Rails. J'utilise JS pour déterminer si le groupe est développé ou non et j'ai créé des classes CSS à ajouter un "+" ou "-" pour indiquer s'il est ouvert ou fermé:

Ouvert: enter image description here

Fermé: enter image description here

Comme vous pouvez le voir dans le CSS, j'utilise une image d'arrière-plan qui est un png dans mes images:

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

Je voudrais utiliser le glyphicon-plus et le glyphicon-moins au lieu de ces fichiers .png.

Quelle est la meilleure façon d'y parvenir?

Mise à jour:

Afin d'obtenir le style approprié, j'ai changé le CSS en:

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

}

Et pour référence, mon HTML est:

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

Et JS pour détecter l'ouverture/fermeture des sections:

$ ->
  $(".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
htmlcssruby-on-railstwitter-bootstrapglyphicons
16
dmt2989

Ici, essayez ceci Bootply. Cela suffirait-il?

<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;
}
24
Lokesh Suthar

J'ai fait quelque chose de similaire pour obtenir un effet de flèche, en utilisant le positionnement absolu pour déplacer le glyphe là où je le voulais:

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

        padding-right: 25px;
    }
2
1800 INFORMATION