首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >无法显示footable排序指示器

无法显示footable排序指示器
EN

Stack Overflow用户
提问于 2016-01-22 16:08:01
回答 1查看 1.1K关注 0票数 1

我在我的rails应用程序中使用了footable,我实现了对page.Sorting的排序和分页,并使用了fine.But可排序的字形图标,但不显示在表头上。

我已经包含了

在样式表中

代码语言:javascript
复制
footable.core.css
fonts
  footable.eot
  footable.svg
  footable.woff
  footable.ttf

在javascript目录中

代码语言:javascript
复制
footable.all.min.js

但我没有得到那里的任何东西,我是missing.Help我。

EN

回答 1

Stack Overflow用户

发布于 2016-08-01 15:50:18

嘿,我也有同样的问题。我只是使用了预定义的Glyphicons,而不是可脚的Glyphicons,并且它起作用了。

在footable.core.css中进行如下修改:

代码语言:javascript
复制
 @font-face {
  font-family: 'Glyphicons Halflings';
 src: url('~/fonts/glyphicons-halflings-regular.eot');
  src: url('~/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
      url('~/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('~/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
      url('~/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); font-weight: normal;
  font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('~/fonts/glyphicons-halflings-regular.svg#footable') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}
.footable.breakpoint > tbody > tr > td > span.footable-toggle {
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  padding-right: 10px;
  text-align:center;
  font-size: 14px;
  color: #888888;
}
.footable > thead > tr > th > span.footable-sort-indicator {
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  padding-left: 5px;
}

瞧!应该能行得通。在上面的代码中,我只显示了修改过的代码片段。对于字形图标,只需搜索"bootstrap glyphicons hex“,就可以找到你想要使用的任何图标的代码。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34941842

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档