Question

我在我的rails应用程序中使用footable。我实现了页面的排序和分页.Sorting和分页工作正常。但是可以在表格标题上显示的可排序的glyphicon图标。

我已经包含了

在样式表中

footable.core.css
fonts
  footable.eot
  footable.svg
  footable.woff
  footable.ttf

在javascript目录中

footable.all.min.js

但我没有得到那些图标。我有什么我想念的。帮助我。

Answer 1

嘿那里，我遇到了同样的问题。我只使用了预定义的Glyphicons而不是可以使用的Glyphicons，它起作用了。

在footable.core.css中修改如下：

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

瞧！它应该工作。在上面的代码中，我只显示已修改的片段。对于glyphicons，只需搜索＆＃34; bootstrap glyphicons hex＆＃34;并会找到您想要使用的任何图标的代码。

无法显示足部排序指标

1 个答案: