feat(icons): add nebular icons demo

This commit is contained in:
KostyaDanovsky 2017-08-30 18:39:14 +03:00
parent 3f73b92fb9
commit 9b7af69dd3
2 changed files with 39 additions and 17 deletions

View file

@ -1,4 +1,32 @@
<div class="row">
<div class="col-md-12 col-lg-6">
<nb-card>
<nb-card-header>
Nebular
</nb-card-header>
<nb-card-body>
<div class="icon" *ngFor="let icon of icons.nebular"><i class="{{ icon }}"></i></div>
</nb-card-body>
<nb-card-footer>
<a href="https://www.npmjs.com/package/nebular-icons" target="_blank">See all Nebular icons</a>
</nb-card-footer>
</nb-card>
<nb-card>
<nb-card-header>
Font awesome icons
</nb-card-header>
<nb-card-body>
<div class="icon" *ngFor="let icon of icons.fontAwesome"><i class="fa {{ icon }}"></i></div>
</nb-card-body>
<nb-card-footer>
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">
See all Font Awesome icons
</a>
</nb-card-footer>
</nb-card>
</div>
<div class="col-md-12 col-lg-6">
<nb-card>
<nb-card-header>
@ -8,23 +36,7 @@
<div class="icon" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
</nb-card-body>
<nb-card-footer>
<a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
</nb-card-footer>
</nb-card>
</div>
<div class="col-md-12 col-lg-6">
<nb-card>
<nb-card-header>
Font awesome icons
</nb-card-header>
<nb-card-body>
<div class="icon" *ngFor="let icon of icons.fontAwesome"><i class="fa {{ icon }}"></i></div>
</nb-card-body>
<nb-card-footer>
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">
See all Font Awesome icons
</a>
<a href="http://ionicons.com/" target="_blank">See all ionicons icons</a>
</nb-card-footer>
</nb-card>
</div>

View file

@ -9,6 +9,16 @@ export class IconsComponent {
icons = {
nebular: ['nb-alert', 'nb-angle-double-left', 'nb-angle-double-right', 'nb-arrow-back', 'nb-arrow-dropdown',
'nb-arrow-left', 'nb-arrow-retweet', 'nb-audio', 'nb-bar-chart', 'nb-checkmark', 'nb-cloudy', 'nb-coffee-maker',
'nb-compose', 'nb-create', 'nb-email', 'nb-flame', 'nb-gear', 'nb-grid-a', 'nb-grid-b', 'nb-heart', 'nb-home',
'nb-keypad', 'nb-layout-centre', 'nb-layout-default', 'nb-layout-one-column', 'nb-layout-sidebar-left',
'nb-layout-sidebar-right', 'nb-layout-two-column', 'nb-lightbulb', 'nb-list', 'nb-location', 'nb-locked',
'nb-loop', 'nb-menu', 'nb-notifications', 'nb-paper-plane', 'nb-partlysunny', 'nb-pause', 'nb-person',
'nb-phone', 'nb-play', 'nb-plus', 'nb-plus-circled', 'nb-power', 'nb-rainy', 'nb-roller-shades', 'nb-search',
'nb-shuffle', 'nb-skip-backward', 'nb-skip-forward', 'nb-snowy', 'nb-square', 'nb-star', 'nb-sunny', 'nb-tables',
'nb-title', 'nb-trash', 'nb-volume-high', 'nb-volume-mute'],
ionicons: [
'ion-ionic', 'ion-arrow-right-b', 'ion-arrow-down-b', 'ion-arrow-left-b', 'ion-arrow-up-c', 'ion-arrow-right-c',
'ion-arrow-down-c', 'ion-arrow-left-c', 'ion-arrow-return-right', 'ion-arrow-return-left', 'ion-arrow-swap',