6、图标:icon

1、图标

/* ---html----*/
 
<ion-content text-center class="icons-basic-page">
 
  <ion-row>
    <ion-col><ion-icon name='ionic'></ion-icon></ion-col>
    <ion-col><ion-icon name='logo-angular'></ion-icon></ion-col>
    <ion-col><ion-icon name='ionitron'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='heart'></ion-icon></ion-col>
    <ion-col><ion-icon name='apps'></ion-icon></ion-col>
    <ion-col><ion-icon name='happy'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='people'></ion-icon></ion-col>
    <ion-col><ion-icon name='person'></ion-icon></ion-col>
    <ion-col><ion-icon name='contact'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='lock'></ion-icon></ion-col>
    <ion-col><ion-icon name='key'></ion-icon></ion-col>
    <ion-col><ion-icon name='unlock'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='map'></ion-icon></ion-col>
    <ion-col><ion-icon name='navigate'></ion-icon></ion-col>
    <ion-col><ion-icon name='pin'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='mic'></ion-icon></ion-col>
    <ion-col><ion-icon name='musical-notes'></ion-icon></ion-col>
    <ion-col><ion-icon name='volume-up'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='cafe'></ion-icon></ion-col>
    <ion-col><ion-icon name='calculator'></ion-icon></ion-col>
    <ion-col><ion-icon name='bus'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='camera'></ion-icon></ion-col>
    <ion-col><ion-icon name='cube'></ion-icon></ion-col>
    <ion-col><ion-icon name='image'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='star'></ion-icon></ion-col>
    <ion-col><ion-icon name='wine'></ion-icon></ion-col>
    <ion-col><ion-icon name='pin'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='arrow-back'></ion-icon></ion-col>
    <ion-col><ion-icon name='arrow-dropdown'></ion-icon></ion-col>
    <ion-col><ion-icon name='arrow-forward'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name='sunny'></ion-icon></ion-col>
    <ion-col><ion-icon name='umbrella'></ion-icon></ion-col>
    <ion-col><ion-icon name='rainy'></ion-icon></ion-col>
  </ion-row>
 
</ion-content>
 
/* ---html----*/

当然可以使用 平台特定 图标
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
是 ios 的时候显示 ios的图标 , 别的则显示 Android的图标
 
变量的图标: 使用一个变量设置一个图标:
<ion-icon [name]="myIcon"></ion-icon>

export class MyFirstPage {
 
  myIcon: string = "home";
 
}

 

 

posted @ 2016-06-06 00:36  淡定君  阅读(1474)  评论(0编辑  收藏  举报