Unable to show footable-sort-indicator

Question

I am using footable in my rails application.I implemented sorting and pagination for a page.Sorting and pagination working fine.But sortable glyphicon icon not showing on table headers.

I have included

In style sheets

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

In javascript directory

footable.all.min.js

But I didnt get those icons.Is there anything I am missing.Help me.

here is the [link](https://jsfiddle.net/0fu1n2m6/1/#run&togetherjs=p7PvIguqMf).And i am unable to add some external files. — vjnan369, Jan 22 '16 at 10:01

score 0 · Answer 1 · answered Aug 01 '16 at 07:50

Hei there, I had the same problem. I just used the predefined Glyphicons instead of the footable ones and it worked.

In the footable.core.css modify like this:

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

And voila! It should work. In the code above i just show the snippets that had been modified. For the glyphicons just search "bootstrap glyphicons hex" and will find the codes for any icon you wanna use.

Unable to show footable-sort-indicator

1 Answers1