Using Font Awesome in Vue 3

user_13647969 0
Viewed 33368

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?

vuejs3 vue-component vue.js javascript
5 Answers

These steps got it working for me:

  1. Install latest-3 (3.0.1) of vue-fontawesome, which is compatible with Vue 3, and the icon dependencies:

    npm i --save @fortawesome/vue-fontawesome@latest-3
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

  2. 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);

  3. Globally register the font-awesome-icon component:

    import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

createApp(App)
  .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app");

  4. In src/App.vue, use the component like this (note the icon name is phone, not faPhone):

    <!-- explicit style -->
<font-awesome-icon :icon="['fas', 'phone']" />

<!-- implicit style (fas is assumed) -->
<font-awesome-icon icon="phone" />

demo

user_62771510

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");
user_123699200

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>
user_11918300

for ease but compromising on bundle size and speed. you can import all icons at once

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

//Add all icons to the library so you can use it in your page
library.add(fas, far, fab)

source official fontawesome docs

user_182872180

Install via command line

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest-3

In your main.js

import { createApp } from 'vue'
import App from './App.vue';

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(fas)

createApp(App)
  .component('fa', FontAwesomeIcon)
  .mount('#app')
user_185712230
Related