在将 font-awesome 包含到 Vue.js 中时遇到问题

Question

预期行为：显示带有很棒字体的星星。 当前行为：正在显示错误字体；很棒的字体未加载。

你好。我相信，我在添加 font-awesome 时遇到了问题。我有一个像这样定义的原子类恒星。

<template>
  <div class="star-rating">
    <span v-for="i in 5" :key="i" :class="[i <= filledStars ? 'star' : (i - 0.5 <= filledStars ? 'star-half-stroke' : 'star-empty')]"></span>
  </div>
</template>

<script>
export default {
  (...)
  mounted() {
    document.fonts.ready.then(() => {
      console.log("Font Awesome is loaded:", window.FontAwesome !== undefined);
    });
  }

}
</script>

<style scoped>

.star-rating .star:before {
  content: "\f005";
}
(...)
</style>

在我的 package.json 中，我确实包含了 font-awesome 作为依赖项。

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "@fortawesome/fontawesome-free": "^5.15.4"
  },

并添加到main.js中 (...)

import App from './App.vue'
import '@fortawesome/fontawesome-free/css/all.css'

尽管如此，我还是在控制台日志中收到此消息，并且不显示字体。 Font Awesome 已加载： false

我尝试调试这个，尝试添加

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

在我的 Atom 中设置样式。这也不是一个有效的解决方案。字体仍然没有加载，我的调试消息仍然返回 false。

Answer 1

通常，我在 fontawesome 上下载 svg 文件来使用。如果你想在 VueJS 项目中使用它，请阅读这篇文档 set-up-with-vue 。记得完成3步。

然后阅读 add-icon-with-vue 了解如何在 vue 中使用 fontawesome。

希望这对您有用。