web-dev-qa-db-ja.com

CSSでグリフィコンを背景画像として使用：Rails 4 + bootstrap 3

ブートストラップのcollapse.jsを使用して、Railsアプリで入力グループを展開および折りたたみます。JSを使用してグループが展開されているかどうかを判断し、追加するCSSクラスを作成しています開いているか閉じているかを示す「+」または「-」：

開いた： enter image description here

閉まっている： enter image description here

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

これらの.pngファイルの代わりにglyphicon-plusとglyphicon-minusを使用したいと思います。

これを達成する最良の方法は何ですか？

更新：

適切なスタイルを取得するために、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
htmlcssruby-on-railstwitter-bootstrapglyphicons
16
dmt2989

ここで、これを試してください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;
}
24
Lokesh Suthar

私は、矢印効果を得るために、絶対位置を使用してグリフを必要な場所に移動するために、似たようなことをしました。

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

        padding-right: 25px;
    }
2
1800 INFORMATION