Correct way to use ionicons in Framework7-vue?

Not sure of the correct way to do this. I added the necessary files to the /css and /fonts folder, and added the line import IoniconsStyles from './css/ionicons.css'; to app.js. It works, but sizing seems off and ios/md prefixes need to be specified manually (e.g. f7-icon ion=“ios-home”>), which is contrary to the Framework7-vue docs where in the examples only the icon name (without prefix) is specified (e.g. f7-icon ion=“home”> as seen on https://framework7.io/vue/icon.html). I am using framework7-template-vue-webpack. Any tips would be appreciated.

That was for their previous icon font. Just follow their guide at https://ionicons.com/usage and probably you should use them as web components

1 Like