travelist / Angular2 Fontawesome
Licence: mit
Angular5 Components and Directives for Fontawesome
Stars: ✭ 87
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular2 Fontawesome
Empathy
❤️ Lightweight admin dashboard build with Tailwindcss, PurgeCSS, Vuejs, Fontawesome 5.
Stars: ✭ 51 (-41.38%)
Mutual labels: fontawesome
Mahapps.metro.iconpacks
Awesome icon packs for WPF and UWP in one library
Stars: ✭ 1,157 (+1229.89%)
Mutual labels: fontawesome
Font Awesome Stylus
Stylus port for font-awesome 4.7.0
Stars: ✭ 77 (-11.49%)
Mutual labels: fontawesome
Drip Ionic3
「水滴打卡」App Open Source Code Base On Ionic V3 Framework
Stars: ✭ 74 (-14.94%)
Mutual labels: angular5
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: ✭ 61 (-29.89%)
Mutual labels: angular5
Fontawesome Module
Module to use Font Awesome icons in Nuxt.js
Stars: ✭ 79 (-9.2%)
Mutual labels: fontawesome
Angular Fontawesome
Official Angular component for Font Awesome 5
Stars: ✭ 1,056 (+1113.79%)
Mutual labels: fontawesome
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (+1085.06%)
Mutual labels: angular5
Angular Infinite List
A short and powerful infinite scroll list library for angular, with zero dependencies
Stars: ✭ 77 (-11.49%)
Mutual labels: angular5
Angular Seed
Angular Seed App with Angular 5.0, ngrx/store 4, bootstrap 4, ngrx/effects, immutable.js
Stars: ✭ 87 (+0%)
Mutual labels: angular5
Spring Boot Mongodb Angular Todo App
A Sample App built using Spring Boot, Angular and MongoDB
Stars: ✭ 84 (-3.45%)
Mutual labels: angular5
Materialtimecontrol
Time component for angular/Material2 (5.0.0-rc0)
Stars: ✭ 81 (-6.9%)
Mutual labels: angular5
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-liandfa-ul - [ ] FaStackDirective
- [ ] Test codes
- After the Angular2 guideline for test code is published
License
(MIT License) - Copyright (c) 2018 Komei Shimamura
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].