angular2-fontawesome

WebJar for angular2-fontawesome

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular2-fontawesome
Last Version	0.5.1
Release Date	Aug 11, 2016
Type	jar
Description	angular2-fontawesome WebJar for angular2-fontawesome
Project URL	http://webjars.org
Source Code Management	https://github.com/travelist/angular2-fontawesome

Download angular2-fontawesome

Filename	Size
angular2-fontawesome-0.5.1.pom
angular2-fontawesome-0.5.1.jar	35 KB
angular2-fontawesome-0.5.1-sources.jar	22 bytes
angular2-fontawesome-0.5.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular2-fontawesome/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular2-fontawesome</artifactId>
    <version>0.5.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular2-fontawesome/
implementation 'org.webjars.npm:angular2-fontawesome:0.5.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular2-fontawesome/
implementation ("org.webjars.npm:angular2-fontawesome:0.5.1")

Apache Buildr

'org.webjars.npm:angular2-fontawesome:jar:0.5.1'

Apache Ivy

<dependency org="org.webjars.npm" name="angular2-fontawesome" rev="0.5.1">
  <artifact name="angular2-fontawesome" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular2-fontawesome', version='0.5.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular2-fontawesome" % "0.5.1"

Leiningen

[org.webjars.npm/angular2-fontawesome "0.5.1"]

Dependencies

compile (4)

Group / Artifact	Type	Version
org.webjars.npm : angular__common	jar	2.0.0-rc.2,2.0.0-rc.3,2.0.0-rc.4,2.0.0-rc.5,2.0.0-rc.6,2.0.0-rc.7,2.0.0-rc.8,2.0.0-rc.9
org.webjars.npm : angular__core	jar	2.0.0-rc.2,2.0.0-rc.3,2.0.0-rc.4,2.0.0-rc.5,2.0.0-rc.6,2.0.0-rc.7,2.0.0-rc.8,2.0.0-rc.9
org.webjars.npm : rxjs	jar	5.0.0-beta.6
org.webjars.npm : font-awesome	jar	[0,)

Project Modules

There are no modules declared in this project.

Angular5 Fontawesome

Angular5 components for Fontawesome

Installation

npm install --save font-awesome angular2-fontawesome

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

Angular CLI

In package.json, insert following lines in the dependencies block:

We can import this library using SystemJS (systemjs.config.js):

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

    // ...

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

Usage

// 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 { }

Parameters

<!-- 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>

name

<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>

size

<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>

flip

<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>

pull

<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>

rotate

<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>

border

<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>

spin

<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>

inverse

<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>

To Develop This Library

npm install typings --global

typings install

npm link

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

Now your change under /src directory will be reflected.

npm unlink

TODO

• Support for fa-stack
• Support for fa-li and fa-ul
• FaStackDirective
• Test codes
  • After the Angular2 guideline for test code is published

License

(MIT License) - Copyright (c) 2018 Komei Shimamura

Versions

Version
0.5.1 Aug 11, 2016