我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
我浪费了几个小时,试图使用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>
其他回答
现在有几种方法可以在Angular CLI上安装fontAwesome:
ng add @fortawesome/angular-fontawesome
OR using yarn
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome
OR Using NPM
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome
参考资料:https://github.com/FortAwesome/angular-fontawesome
我想我会抛出我的决议,因为字体awesome现在安装不同,根据他们的文档。
npm install --save-dev @fortawesome/fontawesome-free
为什么它是fortawesome现在我不知道了,但我想我会坚持使用最新的版本,而不是回到旧的字体-真棒。
然后我把它导入我的scss
$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
希望这能有所帮助
将它添加到您的包中。json作为 “devDependencies” Font-awesome: "版本号"
进入命令提示符,输入您配置的npm命令。
以上工作说明很多,建议大家看一下。不过,有一点需要注意:
在安装后,使用<i class="fas fa-coffee"></i>在我的项目(新实践项目只有一个星期了)中没有工作,这里的示例图标也在过去一周内从Font Awesome复制到剪贴板。
这个<i class="fa fa-coffee"></i>是有效的。如果在你的项目上安装了Font Awesome后,它还不能工作,我建议检查图标上的类,删除's',看看它是否工作。
经过一些实验,我设法得到以下工作:
使用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)