Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Font Awesome in Vue 3

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?

like image 370
Šimon Slabý Avatar asked Feb 26 '21 17:02

Šimon Slabý


People also ask

How do I add Google fonts to Vue?

To add a Google Font to a Vue. js component, we can imnport it in our CSS. @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed"); Then we can set the font-family to Roboto in the elements we want.

How do I use Font Awesome icons in NUXT?

The <font-awesome-icon :icon="['fas', 'envelope']"/> is generated by nuxtjs/fontawesome module to call Font Awesome icons. Every time you need to add an icon, you need to use this tag. 'fas' stands for font awesome solid , which is the set we installed earlier along with font awesome brands .


Video Answer


1 Answers

These steps got it working for me:

  1. Install prelease (3.0.0-4) of vue-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
    
  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

like image 95
tony19 Avatar answered Sep 22 '22 00:09

tony19