angular2 fontawesome

字体下载 2025-08-11

不维护

该库不再维护,我想请您考虑使用其他图书馆,例如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 { } 

参数

 <!-- 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 [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 [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 [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 [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 [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 [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 [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 [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 [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-lifa-ul
  • fastack -diractive
  • 测试代码
    • 在发布了Angular2指南之后

执照

(MIT许可证) - 版权(C)2018 Komei Shimamura

下载源码

通过命令行克隆项目:

git clone https://github.com/travelist/angular2-fontawesome.git