Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fontawesome 5 with VuetifyJs 1.0.0

I want to use Fontawesome 5 Icons with VuetifyJs. Is that possible? which npm package for fontawesome should I use? because no one worked for me. It is really confusing for me as an inexperienced VuetifyJs developer to use it, with the lack of any clear steps in the documentation of VuetifyJs.

like image 907
Nafaa Boutefer Avatar asked Feb 14 '18 09:02

Nafaa Boutefer


People also ask

How do I use V icon?

The v-icon component provides a large set of glyphs to provide context to various aspects of your application. For a list of all available icons, visit the official Material Design Icons page. To use any of these icons simply use the mdi- prefix followed by the icon name.

How do I add font awesome to Vuetify?

Font Awesome SVG Icons Add required dependencies. Then add globally font-awesome-icon component and set faSvg as iconfont in Vuetify config. The Tidelift Subscription is a managed open source subscription for application dependencies.

How do I import Fortawesome Fontawesome for free?

OR if you are using Sass, you can import the module in app. scss . @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/<type>'; Note: Replace <type> with solid , brands or regular whatever type of icons you need.


1 Answers

From docs:

Font Awesome is also supported. Simply use the fa- prefixed icon name. Please note that you still need to include the Font Awesome icons in your project.

Release notes:

Things we added

v-icon now supports FontAwesome 5

You probably just need to include it in your index.html inside <head> or so

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

Then use like <v-icon>fa-search</v-icon>

like image 155
Traxo Avatar answered Oct 09 '22 21:10

Traxo