Using Font Awesome in Vue 3

We Are Going To Discuss About Using Font Awesome in Vue 3. So lets Start this Javascript Article.

Using Font Awesome in Vue 3

How to solve Using Font Awesome in Vue 3

These steps got it working for me:
Install latest-3 (3.0.1) of vue-fontawesome, which is compatible with Vue 3, and the icon dependencies:
npm i --save @fortawesome/[email protected] 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 is phone, not faPhone):
<!-- explicit style --> <font-awesome-icon :icon="['fas', 'phone']" /> <!-- implicit style (fas is assumed) --> <font-awesome-icon icon="phone" />
demo

Using Font Awesome in Vue 3

These steps got it working for me:
Install latest-3 (3.0.1) of vue-fontawesome, which is compatible with Vue 3, and the icon dependencies:
npm i --save @fortawesome/[email protected] 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 is phone, not faPhone):
<!-- explicit style --> <font-awesome-icon :icon="['fas', 'phone']" /> <!-- implicit style (fas is assumed) --> <font-awesome-icon icon="phone" />
demo

Solution 1

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/[email protected]
    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

Original Author tony19 Of This Content

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

Original Author Riza Khan Of This Content

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> 

Original Author mpalencia Of This Content

Solution 4

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

Original Author jasbir khalif Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment