fontawesome with vue do not work

问题

Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I tried this tutorial (https://github.com/FortAwesome/vue-fontawesome) but whatever I did the icons do not render, maybe someone can point me to the solution?

Here is my code but the icons even do not render:

import FontAwesomeIcon from '@fortawesome/vue-fontawesome';


export default {
  name: 'App',
  components:{FontAwesomeIcon}
}

<template>
  <div id="app"><font-awesome-icon icon="spinner" /></div>
</template>

also, I get an error in the console:

Check not find one or more icon(s) {prefix: "fas", iconName: "spinner"} {}

回答1:

I think you might be missing some dependencies. Please try

<script>
import fontawesome from "@fortawesome/fontawesome";
import brands from "@fortawesome/fontawesome-free-brands";
// import 1 icon if you just need this one. Otherwise you can import the whole module
import faSpinner from "@fortawesome/fontawesome-free-solid/faSpinner"; 
import FontAwesomeIcon from "@fortawesome/vue-fontawesome";

fontawesome.library.add(brands, faSpinner);
// or .add(brands, solid) if you need the whole solid style icons library/module

export default {
  name: "App",
  components: {
    FontAwesomeIcon
  }
};
</script>

Working example: https://codesandbox.io/s/ov6o0xk23y

回答2:

Remember to load each icon that you are using. My icons weren't rendering because I forgot to add them to the library.

Template:

<icon icon="lock" />

JS:

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import {
  // import icons here
  faLock,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

import App from './App.vue';

// add icons to library here
library.add(faLock);

Vue.component('icon', FontAwesomeIcon);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

来源：https://stackoverflow.com/questions/50053163/fontawesome-with-vue-do-not-work

标签

Vue.js

font-awesome-5