在 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的主要内容,如果未能解决你的问题,请参考以下文章

css使用背景灵活展示雪碧图

如何在不使用 Bootstrap CSS 的情况下包含 Glyphicons

压缩 css 文件导致 glyphicon 字体无法呈现:资源解释为字体但使用 MIME 类型 text/plain 传输

(javascript,css)如果用frameset将窗口分成五个frame了,还能用一张大图作为整个窗口的背景图片吗?

css中如何调整插入背景图片的大小

css中的背景图怎么改变大小