Bootstrap3 - Using glyphicon as background image in CSS

来源：互联网发布：男生发型软件编辑：程序博客网时间：2024/06/03 20:21

示例一：

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

And for reference, my HTML is:

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

And JS to detect the opening/closing of the 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

示例二：

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

0 0