Html 在 CSS 中使用字形作为背景图像：rails 4 + bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22261048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using glyphicon as background image in CSS: rails 4 + bootstrap 3
提问by dmt2989
I'm using bootstrap's collapse.js to expand and collapse some input groups in a rails app. I'm using JS to determine if the group is expanded or not and have created CSS classes to add a "+" or "-" to show whether it's open or closed:
我正在使用 bootstrap 的 collapse.js 来展开和折叠 rails 应用程序中的一些输入组。我正在使用 JS 来确定该组是否展开并创建了 CSS 类来添加“+”或“-”以显示它是打开还是关闭：
Open:
打开：
Closed:
关闭：
As you can see from the CSS, I'm using a background image that's a png within my images:
正如您从 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;
}
I would like to use the glyphicon-plus and glyphicon-minus instead of these .png files.
我想使用 glyphicon-plus 和 glyphicon-minus 而不是这些 .png 文件。
What's the best way to accomplish this?
实现这一目标的最佳方法是什么？
Updated:
更新：
In order to get the proper styling, I changed the CSS to:
为了获得正确的样式，我将 CSS 更改为：
.expandable {
height:40px;
width:50%;
margin:6px;
}
.expandable:before{
content:"b";
font-family:"Glyphicons Halflings";
line-height:1;
margin:5px;
}
.expanded {
height:40px;
width:50%;
margin:6px;
}
.expanded:before{
content:"12";
font-family:"Glyphicons Halflings";
line-height:1;
margin:5px;
}
And for reference, my HTML is:
作为参考，我的 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....
And JS to detect the opening/closing of the sections:
和 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
回答by Lokesh Suthar
回答by 1800 INFORMATION
I did something similar to get an arrow effect, using absolute positioning to move the glyph to where I wanted it:
我做了一些类似的事情来获得箭头效果，使用绝对定位将字形移动到我想要的位置：
li.arrow {
&:after {
content:"\e080";
font-family:"Glyphicons Halflings";
position: absolute;
right: 15px;
top: 10px;
}
padding-right: 25px;
}
