字体与角2真棒 [英] font awesome with Angular 2

问题描述

我开始了一个NG2的应用程序，并希望添加字体真棒。
我npm安装它：npm install --save font-awesome angular2-font-awesome。
我添加到了systemjs.config.js中的项目中：

$ p $ map：{
//我们的应用程序是在应用程序文件夹
app：'app'，

//角度包
'@ angular / core'：'npm：@ angular / core / bundles / core。 '：'angular / common'：'npm：@ angular / common / bundles / common.umd.js'，
'@ angular / compiler'：'npm：@ angular /编译器/ bundles / compiler.umd.js'，
'@ angular / platform-b​​rowser'：'npm：@ angular / platform-b​​rowser / bundles / platform-b​​rowser.umd.js'，
' @ angular /平台浏览器动态'：'npm：@ angular / platform-b​​rowser-dynamic / bundles / platform-b​​rowser-dynamic.umd.js'，
'@ angular / http'：'npm：@ /角度/ http / bundles / http.umd.js'，
'@角度/路由器'：'npm：@角度/路由器/ bundles / router.umd.js'，
'@角度/形式'：'npm：@ angular / forms / bundles / forms.umd.js'，

//其他库
'rxjs'：'npm：rxjs'，
'角在-MEMOR y-web-api'：'npm：angular-in-memory-web-api / bundles / in-memory-web-api.umd.js'，
'angular2-fontawesome'：'node_modules / angular2- fontawesome'
}，
// package告诉系统加载器在没有文件名和/或没有扩展名时如何加载
软件包：{
app：{
defaultExtension： 'js'
}，
rxjs：{
defaultExtension：'js'
}，
'angular2-fontawesome'：{defaultExtension：'js'}

$ / code>

我加入了app.module.ts：

 从'@ angular / core'导入{NgModule}; 
从'@ angular / platform-b​​rowser'导入{BrowserModule}; 
 
从'./app.component'导入{AppComponent}; 
从'./corporate/corporate.component'中导入{CorporateComponent}; 
从'angular2-fontawesome / angular2-fontawesome'导入{Angular2FontawesomeModule} 
 $ b @NgModule（{
进口：[BrowserModule，Angular2FontawesomeModule]，
声明：[AppComponent ，CorporateComponent]，
 bootstrap：[AppComponent] 
}）
 export class AppModule {} 
  

现在我尝试在组件中使用它：
我在html模板中添加：

pre $ $ $ c>< i class =fa fa-industryaria-hidden =true>< / i>


但是不知何故，我没有看到它...
我遵循npm手册： https://www.npmjs.com/package/angular2-fontawesome

还有什么我可能已经忘记的？

感谢您的回答！$ b $如果你想在你的应用程序中使用FontAwesome css风格，只需把css链接到你的index.html，你不需要 angular2-font-awesome

index.html

 < link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css>如果你使用 angular2-font-awesome  
 $ / code> 

 < i fa [name] =industry>< / i> 
< fa [name] =industry>< / fa> 
  

我认为使用cdn更好。

I started an NG2 app and wanna add font awesome. I npm installed it with : npm install --save font-awesome angular2-font-awesome. I added to project in systemjs.config.js:

map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'angular2-fontawesome': 'node_modules/angular2-fontawesome'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-fontawesome': { defaultExtension: 'js' }
}

and I added in app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { CorporateComponent }  from './corporate/corporate.component';
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'

@NgModule({
  imports:      [ BrowserModule , Angular2FontawesomeModule],
  declarations: [ AppComponent, CorporateComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now I try to use it in my component: I add in the html template:

<i class="fa fa-industry" aria-hidden="true"></i>

But somehow I don't see it... I followed the manual of npm: https://www.npmjs.com/package/angular2-fontawesome

Is there anything else that I might have forgotten ?

Thanks for any answer!

解决方案

if you wanna using FontAwesome css style in your app, just put css link to your index.html, you don't need angular2-font-awesome

index.html

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

if you using angular2-font-awesome

<i fa [name]="industry"></i>
<fa [name]="industry"></fa>

i think use cdn is better.

这篇关于字体与角2真棒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！