Introduction
Have ever you installed this package?
@fortawesome/fontawesome-free
And imported those packages like this?
import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";
And somehow, used the icons like this?
<i class="fa fa-image"></i>
If you encountered the same problem where the icons are not updating dynamically using these packages, this one is for you.
Solution
Use Font Awesome 5 Vue component
Full documentation
Step 1: Install packages
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/vue-fontawesome
As you can see, there are different FontAwesome packages available for use.
- Solid
- Regular
- Brands
If you are a Subsriber of Font Awesome Pro, you can install these packages as well.
$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons
Step 2: Import
Go to your main js/ts file src/main.js or in my case, src/main.ts as an entry point file
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fab, fas, far);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
This will allow you to use all the icons inside those packages. But the documentation says it's still better to import the icon you just need to use.
Usage
After you have successfully imported the packages you should now be able to use them in your Vue template files.
Solid icons: @fortawesome/free-solid-svg-icons
<font-awesome-icon :icon="['fas', 'image']" />
<font-awesome-icon :icon="['fas', 'user']" />
Regular icons: @fortawesome/free-regular-svg-icons
<font-awesome-icon :icon="['far', 'image']" />
<font-awesome-icon :icon="['far', 'user']" />
Branch icons:@fortawesome/free-brands-svg-icons
<font-awesome-icon :icon="['fab', 'twitter']" />
Extra
You can also specify the icon you just want to use.
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
import { faUser } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faTwitter, faUserAstronaut, faUser);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Solid icons:
<font-awesome-icon icon="user-astronaut"/>
Regular and Brand icons should be implemented the same as the above
<font-awesome-icon :icon="['far', 'user']" />
<font-awesome-icon :icon="['fab', 'twitter']" />
The only difference is, you cannot use any icons aside from what icons are imported.
This codes should not show any icons on your page using specific icon imports
<font-awesome-icon :icon="['far', 'user-secret']"/>
<font-awesome-icon :icon="['fab', 'facebook']" />
For the full documentation of the installation just click this link
If you have questions, concerns, or additional about this topic, just send me a DM on my twitter.
Thank you! Happy coding!
Top comments (4)
This doesn't work in vue3, please some recommendation maybe
Hey! Apologies for my late response. Anyway, thank you for your comment! I will try to find out how to make use of this in vue3. :)
Thank you.
Glad it helps :)