angular4中引入font-awesome字体图标

引入font-awesome（3种方式实现引入你的项目当中）地址：http://fontawesome.dashgame.com/

1

首先安装字体依赖文件 

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>

2.

结合Material一同使用

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

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

• 1
• 2
• 3
• 4
• 5
• 6

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

现在你可以在你项目的任何模块使用font-awesome了

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

3.

单独使用material

在index.html中直接引入

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