文章/答案/技术大牛

发布

社区首页 >问答首页 >方图图标显示为原始控件中的框。

问方图图标显示为原始控件中的框。
EN

Stack Overflow用户

提问于 2017-05-19 22:17:25

回答 1查看 802关注 0票数 0

我使用的是素数ng，无法使控件与图标一起显示。我得到的只是盒子，但是当我在主控件之外使用方框时，一切都很好。

我使用NPM来安装。

这是我的

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": {}
    }

font-awesome

angular2-forms

primeng

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-19 22:22:52

我有一次用方框代替FontAwesome图标，因为我用"Open Sans"覆盖了font-family属性(我的字体系列用于应用程序的其余部分)。

它正在用"FontAwesome"覆盖FontAwesome的默认字体系列Open Sans，所以所有的图标都显示为方框。

我将验证您的font-family属性FontAwesome是否在某个地方被覆盖。希望这能解决问题..。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44079742

复制

相似问题

问方图图标显示为原始控件中的框。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问方图图标显示为原始控件中的框。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问方图图标显示为原始控件中的框。
EN