我使用的是Angular 2+和Angular CLI。

我如何添加字体awesome到我的项目?


当前回答

要在你的Angular项目中使用Font Awesome 5,将下面的代码插入到src/index.html文件中。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

好运!

其他回答

如果由于某种原因你不能安装包抛出npm。你可以编辑index.html,并在头部添加字体和CSS。然后用在项目中。

经过一些实验,我设法得到以下工作:

使用npm安装: NPM install font-awesome——保存 添加到angular-cli-build.js文件: vendorNpmFiles: [ font-awesome / * * / *。+ (css | css.map |传递|测试结束svg | | ttf woff | | woff2)”, ] 添加到index.html <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">


关键是在angular-cli-build.js文件中包含字体文件类型

.+(css|css.map|otf|eot|svg|ttf|woff|woff2)

对于使用ng的Angular 9:

ng add @fortawesome/angular-fontawesome@0.6.x

更多信息请看这里

我浪费了几个小时,试图使用AngularCLI 6.0.3和Material Design来获得最新版本的fontaweesome 5.2.0。我遵循了FontAwesome网站上的npm安装说明

他们最新的文档指导你使用以下方法进行安装:

npm install @fortawesome/fontawesome-free

在浪费了几个小时后,我终于卸载了它,并使用以下命令安装字体awesome(这安装FontAwesome v4.7.0):

npm install font-awesome --save

现在它可以很好地使用:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

webpack2使用:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

name=/assets/fonts/[name].[ext]