Vue-tables-2: Using Fontawesome 5 for sort icons [enhancement]

[rico]

It would be nice, if we could use _Fontawesome_ icons version 5 for the sort icons, e.g.

sortIcon:{
   is:'fa-sort',
   base:'fas',
   up: 'fa-sort-up',
   down: 'fa-sort-down'
}

The is value works, but the current implementation is just switching classes for the element, and that is not working for _Fontawesome 5,_ as it replaces the <span> elements with <svg>.

Thanks for your work, really appreciate it and love to use it!

[jesuscaridad]

hice lo mismo pero no me funciono

[alanaasmaa]

If there would be an option to add custom template then it would be possible to generate the html using font awesome api.

https://fontawesome.com/how-to-use/font-awesome-api#advanced-stuff

[jblotus]

customizing the icon tag / template would be handy

[morficus]

This actually worked for me

sortIcon:{
            base:'fa fas',
            is:'fa-sort',
            up: 'fa-sort-alpha-asc',
            down: 'fa-sort-alpha-desc'
          }

[alanaasmaa]

@morficus i suppose you are loading font awesome after rendering ?

[francislavoie]

@morficus that's FontAwesome 4, not 5.

[gitBC]

My project uses Vue and the Vue compenent. In my case, I'm also swapping icons with SVGs via the dom watcher. I simply needed to instruct fontawesome-svg-core to use the nesting style of swapping instead.

/**
 * Setting this config so that Vue-tables-2 will be able to replace sort icons with chevrons
 * https://fontawesome.com/how-to-use/with-the-api/setup/configuration
 */
import { config } from '@fortawesome/fontawesome-svg-core'
config.autoReplaceSvg = "nest";

/**
 * Allows DOM to change <i> tags to SVG for more features like layering
 * https://fontawesome.com/how-to-use/on-the-web/styling/layering
 */
import { dom } from '@fortawesome/fontawesome-svg-core'
dom.watch();

[nelson6e65]

Amazing, @gitBC ! :tada: This works! Thanks! :heart:

You just need to import the icons to use, add to library, apply your config and is ready to go:

import Vue from 'vue'
import { library, config, dom } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import {  
  faSort,
  faSortAlphaDown,
  faSortAlphaUp 
} from '@fortawesome/free-solid-svg-icons'

library.add(
  faSort,
  faSortAlphaDown,
  faSortAlphaUp,
)

/**
 * Setting this config so that Vue-tables-2 will be able to replace sort icons with chevrons
 * https://fontawesome.com/how-to-use/with-the-api/setup/configuration
 */
config.autoReplaceSvg = 'nest'

/**
 * Allows DOM to change <i> tags to SVG for more features like layering
 * https://fontawesome.com/how-to-use/on-the-web/styling/layering
 */
dom.watch()

Vue.component('fa', FontAwesomeIcon)

@gitBC comment should be added to documentation

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[indy659]

@gitBC
You beauty!