代码之家 › 专栏 › 技术社区 › Matthew Flynn

将字体Awesome与Webpack 4和Angular 6集成

webpack-4 webpack angular

1

Matthew Flynn · 技术社区 · 7 年前

我很难弄到 font-awesome 图标出现在我的角度6温泉。

我的SPA是基于git模板的;

Angular Webpack App

我已经把包裹加到我的 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";

这个 供应商.js 然后在 webpack.dev.js ;

但是,当我运行命令时 npm run-script build-dev (完成时没有错误)站点运行时没有错误,但在我使用时(例如)

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

图标没有出现。有人能告诉我我做错了什么吗?

2 回复 | 直到 7 年前

1

Muhammed Albarmavi 7 年前

从angular/cli的故事中,如何包含字体awesome:

创建空文件 _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';

angular/cli include font awesome

2

0

Anoop Surendran 7 年前

最好的方法是在 angular.json 文件。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "restuarant-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/restuarant-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [] /* add the path to font-awesome Here*/
    }