Using Font Awesome in Vue 3
Solution 1
These steps got it working for me:
-
Install
prelease
(3.0.0-4
) ofvue-fontawesome
, which is compatible with Vue 3, and the icon dependencies:npm i --save @fortawesome/vue-fontawesome@prerelease npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons
-
In
main.js
, select the icons from@fortawesome/free-solid-svg-icons
to load:import { library } from "@fortawesome/fontawesome-svg-core"; import { faPhone } from "@fortawesome/free-solid-svg-icons"; library.add(faPhone);
-
Globally register the
font-awesome-icon
component:import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; createApp(App) .component("font-awesome-icon", FontAwesomeIcon) .mount("#app");
-
In
src/App.vue
, use the component like this (note the icon name isphone
, notfaPhone
):<!-- explicit style --> <font-awesome-icon :icon="['fas', 'phone']" /> <!-- implicit style (fas is assumed) --> <font-awesome-icon icon="phone" />
Solution 2
Tony19 is correct but if you want to avoid cluttering your main.ts(js) file, you can do something like this:
What you can do is create a separate file:
fontawesome-icons.ts
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone, faUser, faFlag } from "@fortawesome/free-solid-svg-icons";
library.add(faPhone, faUser, faFlag);
export default FontAwesomeIcon;
Then in your main.ts
:
import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import "@/assets/css/main.scss";
import router from "./router";
import store from "./store";
import FontAwesomeIcon from "@/utilities/fontawesome";
createApp(App)
.component("FontAwesomeIcon", FontAwesomeIcon)
.use(store)
.use(router)
.mount("#app");
Solution 3
Install
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
On your main.ts
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(fas, far, fab)
dom.watch();
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app')
To use on .vue files
<i class="fa-solid fa-arrow-left"></i>
<i class="fa-brands fa-facebook"></i>
Šimon Slabý
Updated on May 13, 2022Comments
-
Šimon Slabý almost 2 years
I'm trying to use Font Awesome with Vue 3.
I have it in my
package.json
"dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/free-brands-svg-icons": "^5.15.2", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/vue-fontawesome": "^3.0.0-3", }
Imported FontAwesome in
main.js
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import { library } from "@fortawesome/fontawesome-svg-core"; import { faPhone } from "@fortawesome/free-solid-svg-icons/faAddressBook"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; library.add(faPhone); /* eslint-disable */ createApp(App) .use(store) .use(router) .component("font-awesome-icon", FontAwesomeIcon) .mount("#app")
And this inside component in
<template>
<font-awesome-icon :icon="['fas', 'faPhone']" />
But when I use it in component nothing is happening... In element is doent's render anything it only shows HTML comment
<!---->
How can I fix this problem and start using FontAwesome in any Component? -
Šimon Slabý about 3 yearsOkay so problem was basically only that I wrote
['fas', 'faPhone']
instead of['fas', 'phone']
-
Pascal R. about 2 yearsI was looking for a way to display the icon without using the FontAwesome component because I have to pass it to a non-Vue library. This worked like a charm! It's the
dom.watch()
that makes the difference. -
Passiv Programmer almost 2 yearsWhile it is better to use a separate file, you are still cluttering that file. The import statements can be bundled like: import { faPhone, faUser, faFlag } from "@fortawesome/free-solid-svg-icons"; library.add(faPhone, faUser, faFlag);
-
Riza Khan almost 2 years@PassivProgrammer Updated, thanks for pointing that out
-
Martin Zeltin almost 2 yearsThe naming convention for components is to use PascalCase so it would be
FontAwesomeIcon
instead offont-awesome-icon