Angular4引入字体图标

Angular4引入字体图标

27
Sep 2018

引入字体图标的方法有四种,大家可以采用适合自己的方式来进行字体引入。 本人使用最多的字库是font-awesomeiconfont,本文的四种引入方式兼可适用。现在用font-awesome来举例说明使用方法。

一、在css、sass或less中引入

首先安装字体依赖文件

npm install --save font-awesome

如果使用css, 在你的项目的style.css中引入font-awesome.css

@import '~font-awesome/css/font-awesome.css';

如果使用less, 在你的项目的style.less中引入font-awesome.less

@fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/less/font-awesome.less';

在需要的代码中直接引用class名称

<i class="fa fa-area-chart"></i>

二、结合Material一同使用

在你的app.module.ts的constructor中使用MdIconRegistry

export class AppModule {
  constructor(mdIconRegistry: MdIconRegistry) {
    mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

然后添加MdIconModule, 在你的@NgModule中的imports添加

@NgModule({
  imports: [
    MdIconModule,
    ....
  ],
  declarations: ....
})

因为加在了全局模块app.module.ts文件里,所以现在你可以在你项目的任何模块使用font-awesome了

<md-icon fontSet="fontawesome" fontIcon="fa-area-chart"></md-icon>

三、单独使用material

在index.html中直接引入

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

四、在angular.json里引入

注意: 如果你使用的是低版本的angular, 那么你的配置文件名是angular-cli.json; 如果你使用的最新版的angular6, 那么文件名是angular.json.

这里以angular6来说明, 在angular.json文件中styles[] array中添加font-awesome引用路径

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "outputPath": "dist/EduClient",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
            "src/favicon.ico",
            "src/assets"
         ],
         "styles": [
            "src/styles.less",
            "../node_modules/bootstrap/dist/css/bootstrap.css",
            "../node_modules/font-awesome/css/font-awesome.css"
         ],
         "scripts": [
            "node_modules/ajv/dist/ajv.bundle.js"
         ]
    },
    ...
标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

/鼻子 /黑头 /黄瓜 /魔鬼 /雪糕 /鄙视 /送花 /耳光 /神气 /石头 /石化 /睡觉 /爱心 /点赞 /死去 /无语 /捂眼 /拥抱 /打你 /感动 /感冒 /怒火 /微笑 /害羞 /奸笑 /唉呀 /哭泪 /吐血 /吐口水 /吐你 /口水 /勾引 /剪刀手 /出拳 /冰冻 /亲亲 /中指 /不想看 /不开心