时间戳

首页 > 解决方案 > 使用 NPM 安装 Font Awesome 5

angular - 使用 NPM 安装 Font Awesome 5

问题描述

我正在使用 Angular(6) 应用程序，我正在尝试使用 FA 图标，并且下拉菜单没有运气。我成功使用了 FA(4) 图标，例如：

<i class="fa fa-align-justify"></i>

但<i class="fas fa-align-justify"></i>不工作。我正在使用以下命令安装 FA：

npm install font-awesome --save

这是来自package.json文件node_modules夹：

图片

我可以看到font-awesome.css，但它Font Awesome 4.7.0显示如下：

图片

在angular.json文件中，我引用了 FA： "node_modules/font-awesome/css/font-awesome.min.css",

我读了很多帖子，比如如何使用通过 NPM 安装的字体 Awesome 5

我还需要做什么？

标签： angularfont-awesomefont-awesome-5

解决方案

对于版本 5，您需要以下软件包@fortawesome/fontawesome。请参阅使用包管理器安装。

使用 npm：

npm install --save @fortawesome/fontawesome-free

然后在 中引用all.css或。all.js<head>

<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

注意：确保路径正确，具体取决于您安装软件包的位置。

或者您可以在您的 js 代码中导入该模块。

import '@fortawesome/fontawesome-free/js/all.js';

或者，如果您使用的是 Sass，则可以将模块导入app.scss.

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/<type>';

注意：替换<type>为solid，brands或regular您需要的任何类型的图标。

Font Awesome 有一个官方的Angular组件。

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-<type>-svg-icons
npm install --save @fortawesome/angular-fontawesome

注意：替换<type>为solid，brands或regular您需要的任何类型的图标。

您还可以安装Vue和React组件。

npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/react-fontawesome

推荐阅读