I'd like to use FontAwesome instead of Glyphicons to provide the icons, but this is no

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

customIcons -option is added Usage: <div class

Support custom icon classes about ember-models-table HOT 4 CLOSED

onechiporenko commented on June 2, 2024

Support custom icon classes

from ember-models-table.

Comments (4)

zavan commented on June 2, 2024

If anyone is interested, right now I'm "aliasing" FA icons to glyphicons:

span.glyphicon.glyphicon-triangle-bottom:before {
  content: "\f150";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-triangle-top:before {
  content: "\f151";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-check:before {
  content: "\f046";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-unchecked:before {
  content: "\f096";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-chevron-left:before {
  content: "\f053";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-chevron-right:before {
  content: "\f054";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-menu-left:before {
  content: "\f060";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-menu-right:before {
  content: "\f061";
  font-family: FontAwesome;
}

You can get the "content" unicode for the icons here.

from ember-models-table.

listepo commented on June 2, 2024

@zavan you can extend ember-models-table http://stackoverflow.com/questions/28654662/how-to-extend-an-ember-cli-addon and use any icons and classes :)

from ember-models-table.

arthur-s commented on June 2, 2024

@listepo, @onechiporenko, @zavan I edited this module to Pure.css and FontAwesome
https://github.com/arthur-s/ember-models-table
without tests

from ember-models-table.

onechiporenko commented on June 2, 2024

customIcons-option is added
Usage:

{{models-table data=data columns=columns customIcons=customIcons}}

customIcons:

customIcons = {
    'sort-asc': 'class-sort-asc',
    'sort-desc': 'class-sort-desc',
    'column-visible': 'class-column-visible',
    'column-hidden': 'class-column-hidden',
    'nav-first': 'class-nav-first',
    'nav-prev': 'class-nav-prev',
    'nav-next': 'class-nav-next',
    'nav-last': 'class-nav-last'
  };