与Webpack 4和角形6集成字体
与Webpack 4和角形6集成字体
提问于 2018-08-07 10:33:27
我有困难，使font-awesome图标出现在我的角度6 SPA。
我的SPA是基于这里的git模板；
我已经把这个包添加到我的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>图标没有出现。有人能告诉我我在这里做错了什么吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-07 10:42:49
从角/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';Stack Overflow用户
发布于 2018-08-07 10:45:49
最好的方法是在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*/
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51724640
复制相关文章
相似问题
腾讯云开发者
