angular2 fontawesome

不维护

该库不再维护，我想请您考虑使用其他图书馆，例如https://git**hub.*com/fortawesome/angular–fontawesome。

Angular5 fontawesome

安装

npm install --save font-awesome angular2-fontawesome

 /* package.json */
\"font-awesome\": \"~4.7.0\"  # Use any versions
\"angular2-fontawesome\": \"~5.2.0\"

角CLI

在package.json中，插入dependencies项块中的以下行：

我们可以使用Systemjs（ systemjs.config.js ）导入此库：

 // .angular-cli.json
{
  \"apps\" : [

    // ...

    \"styles\" : [
      // Add this line
      \"../../node_modules/font-awesome/css/font-awesome.css\"
    ]
    // ..
  ]
} 

用法

 // src/app/app.module.ts

// ....

// Add this import statement
import { Angular2FontawesomeModule } from \'angular2-fontawesome/angular2-fontawesome\'

// ....


@ NgModule ( {
  declarations : [
    AppComponent
  ] ,
  imports : [
    BrowserModule ,
    Angular2FontawesomeModule  // Add this line
  ] ,
  providers : [ ] ,
  bootstrap : [ AppComponent ]
} )
export class AppModule { } 

参数

<fa [name]=string // name of fontawesome icon
[size]=number // [1-5]
[flip]=string // [horizontal|vertical]
[pull]=string // [right|left]
[rotate]=number // [90|180|270]
[border]=boolean // [true|false]
[spin]=boolean // [true|false]
[fw]=boolean // [true|false]
[inverse]=boolean // [true|false]
></fa>

<i fa [name]=string // name of fontawesome icon
[size]=number // [1-5]
[flip]=string // [horizontal|vertical]
[pull]=string // [right|left]
[rotate]=number // [90|180|270]
[border]=boolean // [true|false]
[spin]=boolean // [true|false]
[fw]=boolean // [true|false]
[inverse]=boolean // [true|false]
></fa>\”>

 <!-- Component -->
< fa [name] = string      // name of fontawesome icon
    [size]=number      // [1-5]
    [flip]=string      // [horizontal|vertical]
    [pull]=string      // [right|left]
    [rotate]=number    // [90|180|270]
    [border]=boolean   // [true|false]
    [spin]=boolean     // [true|false]
    [fw]=boolean       // [true|false]
    [inverse]=boolean  // [true|false]
    > </ fa >

<!-- Directive -->
< i fa [name] = string      // name of fontawesome icon
      [size]=number      // [1-5]
      [flip]=string      // [horizontal|vertical]
      [pull]=string      // [right|left]
      [rotate]=number    // [90|180|270]
      [border]=boolean   // [true|false]
      [spin]=boolean     // [true|false]
      [fw]=boolean       // [true|false]
      [inverse]=boolean  // [true|false]
      > </ fa >

姓名

<fa>
<i class="fa fa-rocket"></i>
</fa>

<i fa [name]="\’rocket\’"></i>

<i fa class="fa fa-rocket"></i>\”>

 < fa [name] =\" \'rocket\' \" > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" > </ i >
<!-- rendered -->
< i fa class =\" fa fa-rocket \" > </ i >

尺寸

<fa>
<i class="fa fa-rocket fa-lg"></i>
</fa>

<i fa [name]="\’rocket\’" [size]=1></i>

<i fa class="fa fa-rocket fa-lg"></i>\”>

 < fa [name] =\" \'rocket\' \" [size] = 1 > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-lg \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [size] = 1 > </ i >
<!-- rendered -->
< i fa class =\" fa fa-rocket fa-lg \" > </ i >

翻动

<fa>
<i class="fa fa-rocket fa-flip-horizontal"></i>
</fa>

<i fa [name]="\’rocket\’" [flip]="\’horizontal\’"></i>

<i fa class="fa fa-rocket fa-flip-horizontal"></i>\”>

 < fa [name] =\" \'rocket\' \" [flip] =\" \'horizontal\' \" > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-flip-horizontal \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [flip] =\" \'horizontal\' \" > </ i >
<!-- rendered -->
< i fa class =\" fa fa-rocket fa-flip-horizontal \" > </ i >

拉

<fa>
<i class="fa fa-rocket fa-pull-right"></i>
</fa>

<i fa [name]="\’rocket\’" [pull]="\’right\’"></i>

<i class="fa fa-rocket fa-pull-right"></i>\”>

 < fa [name] =\" \'rocket\' \" [pull] =\" \'right\' \" > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-pull-right \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [pull] =\" \'right\' \" > </ i >
<!-- rendered -->
< i class =\" fa fa-rocket fa-pull-right \" > </ i >

旋转

<fa>
<i class="fa fa-rocket fa-rotate-90"></i>
</fa>

<i fa [name]="\’rocket\’" [rotate]=90></i>

<i class="fa fa-rocket fa-rotate-90"></i>\”>

 < fa [name] =\" \'rocket\' \" [rotate] = 90 > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-rotate-90 \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [rotate] = 90 > </ i >
<!-- rendered -->
< i class =\" fa fa-rocket fa-rotate-90 \" > </ i >

边界

<fa>
<i class="fa fa-rocket fa-border"></i>
</fa>

<i fa [name]="\’rocket\’" [border]=true></i>

<i fa class="fa fa-rocket fa-border"></i>\”>

 < fa [name] =\" \'rocket\' \" [border] = true > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-border \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [border] = true > </ i >
<!-- rendered -->
< i fa class =\" fa fa-rocket fa-border \" > </ i >

旋转

<fa>
<i class="fa fa-rocket fa-span"></i>
</fa>

<i fa [name]="\’rocket\’" [span]=true></i>

<i class="fa fa-rocket fa-span"></i>\”>

 < fa [name] =\" \'rocket\' \" [span] = true > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-span \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [span] = true > </ i >
<!-- rendered -->
< i class =\" fa fa-rocket fa-span \" > </ i >

FW

<fa>
<i class="fa fa-rocket fa-fw"></i>
</fa>

<i fa [name]="\’rocket\’" [fw]=true></i>

<i class="fa fa-rocket fa-fw"></i>\”>

 < fa [name] =\" \'rocket\' \" [fw] = true > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-fw \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [fw] = true > </ i >
<!-- rendered -->
< i class =\" fa fa-rocket fa-fw \" > </ i >

逆

<fa>
<i class="fa fa-rocket fa-inverse"></i>
</fa>

<i fa [name]="\’rocket\’" [inverse]=true></i>

<i class="fa fa-rocket fa-inverse"></i>\”>

 < fa [name] =\" \'rocket\' \" [inverse] = true > </ fa >
<!-- rendered -->
< fa >
  < i class =\" fa fa-rocket fa-inverse \" > </ i >
</ fa >

< i fa [name] =\" \'rocket\' \" [inverse] = true > </ i >
<!-- rendered -->
< i class =\" fa fa-rocket fa-inverse \" > </ i > 

开发这个库

npm install typings --global

typings install

npm link

 # /example
npm install font-awesome 
npm link angular2-fontawesome

现在，您的更改下/src目录将得到反映。

 npm unlink

托多

• 支持fa-stack
• 支持fa-li和fa-ul
• fastack -diractive
• 测试代码
  • 在发布了Angular2指南之后

执照

（MIT许可证） – 版权（C）2018 Komei Shimamura