我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
在Angular 2.0最终版发布之后,Angular2 CLI项目的结构已经改变了——你不需要任何供应商文件,不需要system.js——只需要webpack。所以你会:
npm install font-awesome --save In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below: "apps": [ { "root": "src", "outDir": "dist", .... "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!? ], ... } ] ], In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css". Place some font-awesome icons in any html file you want: <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i> Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes. Enjoy your awesome icons!
其他回答
这里有很多好的答案。但如果你尝试了所有这些,仍然得到方形而不是方正的图标,检查你的css规则。在我的例子中,我有以下规则:
* {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
它覆盖了一些字体。只是将* selector替换为body解决了我的问题:
body {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
使用Angular2 RC5和angular-cli 1.0.0-beta.11-webpack。你可以通过CSS导入来实现这一点。
只需安装字体awesome:
npm install font-awesome --save
然后在你配置的样式文件中导入font-awesome:
@import '../node_modules/font-awesome/css/font-awesome.css';
(样式文件在angular-cli.json中配置)
对于使用ng的Angular 9:
ng add @fortawesome/angular-fontawesome@0.6.x
更多信息请看这里
如果由于某种原因你不能安装包抛出npm。你可以编辑index.html,并在头部添加字体和CSS。然后用在项目中。
我想我会抛出我的决议,因为字体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";
希望这能有所帮助