Fontawesome 图标在primeng 控件中显示为框 [英] Fontawesome Icons appearing as boxes within primeng controls
问题描述
我正在使用 prime ng，但无法让控件与图标一起显示.我得到的只是盒子，但是当我在主要控件之外使用 fontawesome 时，一切正常.
I am using prime ng and I can't get the controls to appear with the icons. All I'm getting are boxes but when I use fontawesome outside the prime controls, everything works fine.
我使用 NPM 安装.
I uses NPM to install.
这是我的
index.html 页面
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/" >
<title>Acme Product Management</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="assets/scripts/angular.min.js"></script>
<script src="assets/scripts/angular-route.min.js"></script>
<script src="assets/scripts/angular-local-storage.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/CustTheme1/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/custom.css">
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<pm-app></pm-app>
<script src="assets/scripts/jquery-3.1.1.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
**Package.json**
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"@angular/common": "^2.4.9",
"@angular/compiler": "^2.4.9",
"@angular/core": "^2.4.9",
"@angular/forms": "^2.4.9",
"@angular/http": "^2.4.9",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "^2.4.9",
"@angular/platform-browser-dynamic": "^2.4.9",
"@angular/router": "^3.4.9",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"primeng": "^2.0.3",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.2.0",
"systemjs": "^0.20.9",
"zone.js": "^0.7.7"
},
"devDependencies": {
"concurrently": "^3.4.0",
"lite-server": "^2.2.0",
"tslint": "^4.5.1",
"typescript": "^2.0.2",
"typings": "^2.1.0"
},
"repository": {}
}
推荐答案
我有一次用框代替 FontAwesome 图标，因为我用 Open Sans"覆盖了 (应用程序其余部分的字体系列)font-family 属性
I had boxes appear in place of FontAwesome icons once because I overwrote the font-family attribute with "Open Sans" (my font family for the rest of the app)
它用 Open Sans 覆盖了 "FontAwesome" FontAwesome 的默认字体系列，所以所有图标都显示为框.
It was overwriting the FontAwesome's default font-family of "FontAwesome" with Open Sans, so all the icons appeared as boxes.
我会验证您的 FontAwesome 的 font-family 属性没有在某处被覆盖.希望能解决它...
I would verify that your font-family attribute for FontAwesome isnt being overwritten somewhere. Hopefully that solves it...
这篇关于Fontawesome 图标在primeng 控件中显示为框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
