时间戳

首页 > 解决方案 > 将 Font-Awesome 与 Webpack 4 和 Angular 6 集成

angular - 将 Font-Awesome 与 Webpack 4 和 Angular 6 集成

问题描述

我无法让font-awesome图标出现在我的 Angular 6 SPA 中。

我的 SPA 基于这里的 git 模板；

Angular Webpack 应用程序

我已将包添加到我的package.json;

"dependencies": {
"@angular/animations": "^6.0.7",
"@angular/common": "^6.0.7",
"@angular/compiler": "^6.0.7",
"@angular/compiler-cli": "^6.0.7",
"@angular/core": "^6.0.7",
"@angular/forms": "^6.0.7",
"@angular/http": "^6.0.7",
"@angular/platform-browser": "^6.0.7",
"@angular/platform-browser-dynamic": "^6.0.7",
"@angular/platform-server": "^6.0.7",
"@angular/router": "^6.0.7",
"@angular/upgrade": "^6.0.7",
"@angular-devkit/core": "^0.6.8",
"@agm/core": "^1.0.0-beta.3",
"@ks89/angular-modal-gallery": "^6.2.0",
"angular2-useful-swiper": "5.0.1",
"bootstrap": "3.3.7",
"core-js": "2.5.7",
"ie-shim": "0.1.0",
"font-awesome": "^4.7.0",
"hammerjs": "2.0.8",
"mousetrap": "1.6.2",
"ngx-bootstrap": "^2.0.5",
"rxjs": "6.2.1",
"rxjs-compat": "6.2.1",
"zone.js": "^0.8.26"
},

然后我的vendor.js;

import "font-awesome/scss/font-awesome.scss";

然后在;vendor.js中包含一个入口点。webpack.dev.js

但是，当我运行命令npm run-script build-dev（完成时没有错误）时，站点运行时没有错误，但是当我使用（例如）

 <i class="fa fa-4x fa-phone-square"></i>

图标没有出现。谁能告诉我我在这里做错了什么？

标签： angularwebpackwebpack-4

解决方案

从角度/cli故事如何包含字体真棒：

_variables.scss在其中创建一个空文件src/.并将以下内容添加到_variables.scss：

$fa-font-path : '../node_modules/font-awesome/fonts';

在 styles.scss 中添加以下内容：

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

角度/cli包括字体真棒

推荐阅读