在 CSS 中使用 glyphicon 作为背景图像:rails 4 + bootstrap 3
Posted
技术标签:
【中文标题】在 CSS 中使用 glyphicon 作为背景图像:rails 4 + bootstrap 3【英文标题】:Using glyphicon as background image in CSS: rails 4 + bootstrap 3 【发布时间】:2014-04-11 05:55:53 【问题描述】:我正在使用 bootstrap 的 collapse.js 来展开和折叠 Rails 应用程序中的一些输入组。我正在使用 JS 来确定该组是否扩展,并创建了 CSS 类来添加“+”或“-”来显示它是打开还是关闭:
打开:
关闭:
从 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;
我想使用 glyphicon-plus 和 glyphicon-minus 来代替这些 .png 文件。
最好的方法是什么?
更新:
为了获得正确的样式,我将 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
【问题讨论】:
引导程序 2 还是引导程序 3? 【参考方案1】:在这里,试试这个 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;
【讨论】:
不幸的是,这似乎对我不起作用。打开折叠部分后,我还需要将“+”更改为“-”。 为什么这不起作用,你能解释一下吗?您也可以创建两个类。一个带+,另一个带减号,并相应地切换它们! 更正-如果我将它添加到我现有的 CSS 类(可扩展和扩展)中,这将非常有效。最初我试图将它们添加为一个新类。感谢您的帮助!【参考方案2】:我做了类似的事情来获得箭头效果,使用绝对定位将字形移动到我想要的位置:
li.arrow
&:after
content:"\e080";
font-family:"Glyphicons Halflings";
position: absolute;
right: 15px;
top: 10px;
padding-right: 25px;
【讨论】:
以上是关于在 CSS 中使用 glyphicon 作为背景图像:rails 4 + bootstrap 3的主要内容,如果未能解决你的问题,请参考以下文章
如何在不使用 Bootstrap CSS 的情况下包含 Glyphicons
压缩 css 文件导致 glyphicon 字体无法呈现:资源解释为字体但使用 MIME 类型 text/plain 传输
(javascript,css)如果用frameset将窗口分成五个frame了,还能用一张大图作为整个窗口的背景图片吗?