fontawesome 5 не удалось найти один или несколько значков в приложении vue js

Question

Я получаю сообщение об ошибке при использовании значка Font Awesome 5 в приложении Vue Js:

ошибка

Не удалось найти один или несколько значков

Это мои зависимости package.json:

"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.9",
"@fortawesome/free-solid-svg-icons": "^5.6.0",
"@fortawesome/vue-fontawesome": "^0.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.17",
"vue-router": "^3.0.2"
},

И это мой main.js:

import Vue from 'vue'
import App from './Main.vue'
import Bootstrap from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Bootstrap);

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

library.add(faCoffee);
Vue.component('icon', FontAwesomeIcon);

Vue.config.productionTip = false;

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

Я использую Fontawesome, как это:

<icon :icon="['fas', 'user']" />

Но я получаю ошибку в консоли

Answer 1

Значок пользователя не был импортирован, вместо него был импортирован значок кофе.

Вам необходимо использовать:

import { faUser } from '@fortawesome/free-solid-svg-icons'

Затем добавьте импортированный шрифт в библиотеку следующим образом:

library.add(faUser);

Затем используйте шрифт в своем компоненте:

<icon :icon="['fas', 'user']" />

Answer 2

Гораздо проще, почему это просто <icon icon='coffee'>

Если вы пытаетесь <icon :icon="['fas', 'user']" /> - вы не импортировали иконку пользователя. Эта ошибка, как правило, означает, что вы пытаетесь использовать значок, который не был импортирован, поэтому может быть, например, с ошибкой.

Answer 3

Я боролся с той же проблемой, но случайно нашел решение.

Как я также обнаружил, обычный метод в некоторых случаях не работал. Например, я искалfa-location-dotзначок, и то же самое произошло со мной.

Итак, как показано на изображении ниже, в левом нижнем углу модального окна значка Font Awesome есть значокAliases: map-marker-alt(для этого случая).

Селектор иконок Fonta Awesome

Итак, я попытался импортировать его в свой файл Vue, и вместо этого...

      import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
library.add(faLocationDot);

... и в итоге решил проблему с почти предоставленным псевдонимом, с незначительной модификацией:

      import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
library.add(faMapMarkerAlt);