Using Font Awesome in Vue 3

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)