如何在 Vue 和 Nuxt.js 项目中添加 Font Awesome？答案

【问题标题】：How to add Font Awesome to Vue and Nuxt.js project?如何在 Vue 和 Nuxt.js 项目中添加 Font Awesome？
【发布时间】：2021-06-07 05:48:21
【问题描述】：

我正在尝试添加如下..

CSS：[ '@/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css' ],

但它显示为图像

【问题讨论】：

你是如何在组件中使用它的？
你试过像css: [ { src: '~/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css', lang: 'css' } ]一样吗？
是的，在组件中使用它但不工作，也不能以你的方式工作。

标签： vue.js nuxtjs

【解决方案1】：

首先使用 npm 将依赖项添加到您的项目中

npm i @nuxtjs/fontawesome

或者如果你正在使用纱线

yarn add @nuxtjs/fontawesome

然后将其添加到 buildModules 下的 nuxt.config.js 文件中

buildModules:['@nuxtjs/fontawesome']

接下来在 nuxt.config 文件中添加一个用于配置 fontawesome 的选项。说明您要使用的图标。对于我的情况，我通常在下面添加这些

fontawesome: {
 icons:{
  solid:true,
  brands:true
 }
}

现在您可以在任何 nuxt 组件或页面中使用您的图标了像这样使用它

<font-awesome-icon :icon="['fas', 'home']"/>

就是这样。

【讨论】：

那应该是“npm install”而不是“npm import”吧？
是的，这是一个错字。谢谢，我已经更正了。

【解决方案2】：

您可以在组件/布局中从 cdn/local 导入 css

<style scoped>
@import 'https://pro.fontawesome.com/releases/v5.10.0/css/all.css';
// or 
@import '@/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css';
</style>

或者你在你的 nuxt.config.js (documentation)

export default {
  css: [
    '~/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css'
  ]
}

我建议使用@fortawesome/vue-fontawesome，您可以利用摇树效应

【讨论】：

你提供的方式对我不起作用。为什么我使用 vue-fontawsome？我在这里找到了 nuxtjs/fontawesome 我该如何使用 nuxtjs/fontawsome？
你需要更具体not working不清楚。至于nuxtjs/fontawesome，这是一个单独的问题，您必须参考软件包的文档
尊敬的先生，不工作意味着我尝试了两种方式分别导入组件样式和 nuxt.config.js 的 fontawsome，但显示相同的问题。
检查这个沙箱我在样式标签中导入了css，然后添加了i元素并且工作得很好codesandbox.io/s/boring-stallman-k0w4d
如果您在本地导入 css 文件，请检查字体是否已加载（使用浏览器中的开发人员工具）检查网络选项卡并查找 fontawesome 字体