アクションシートのカスタムアイコンの色をイオン性に変更するにはどうすればいいですか？

Question

次のアクションシートに埋め込まれているカスタムアイコン（IcoMoonで生成）の色を変更したいとします。私はイオンFrameworkのバージョンで働いています：

groups.html

. 
. 
. 
<ion-card> 

    <img src="../../assets/img/groups/acoustics group.jpg"/> 

    <ion-card-content> 
     <ion-card-title> 
      <ion-row> 
       <ion-col class="settitle"> 
        Acoustics 
       </ion-col> 
       <ion-col class="rightcol"> 
        <button class="iconmore" ion-button clear icon-only small (click)="openMenuGroup()" round> 
         <ion-icon name="more" ></ion-icon> 
        </button> 
       </ion-col> 
      </ion-row> 
     </ion-card-title> 
     <p class="content"> 
      22 Bookings <br> 
      Since December 23th 2016 
     </p> 
    </ion-card-content> 

</ion-card> 
. 
. 
. 

グループ：3.1.1

これは、ビューに関連する3つのファイルを見てどのようです.ts

. 
. 
. 
openMenuGroup() { 
    let actionSheet = this.actionsheetCtrl.create({ 
     title: 'More', 
     cssClass: 'action-sheets-groups-page', 
     buttons: [ 
      { 
       text: 'Edit', 
       icon: 'icon-edition', 
       handler:() => { 
        console.log('Edit clicked'); 
       } 
      }, 
      { 
       text: 'Delete', 
       role: 'destructive', 
       icon: 'icon-erase', 
       handler:() => { 
        console.log('Delete clicked'); 
       } 
      },    
      { 
       text: 'Cancel', 
       role: 'cancel', // will always sort to be on the bottom 
       icon: 'close', 
       handler:() => { 
        console.log('Cancel clicked'); 
       } 
      } 
     ] 
    }); 
    actionSheet.present(); 
} 
. 
. 
. 

の

groups.css

page-groups { 

    ion-content{ 

     .settitle{ 
      font-size: 70%; 
      color: grey; 
     } 

     button.iconmore{ 
      font-size: 80%; 
      color: grey; 
     } 

     ion-col.rightcol{ 
      direction: rtl; 
     } 

     p.content{ 
      font-size: 90%; 
      color: grey; 
     } 
    } 

    .action-sheets-groups-page { 


     .icon-edition { 
      color: grey; 
     } 
     .icon-erase { 
      color: grey; 
     } 
     .action-sheet-cancel ion-icon, 
     .action-sheet-destructive { 
      color: grey; 
     } 
    } 

} 

事前のおかげで！私はドキュメンテーションに従おうとしましたが、私はそれを行う方法ができませんでした。

Answer 1

app.scssにスタイルを追加してみ

.action-sheet-has-icons .icon { 
color:/*whatever you want*/ 
} 

Answer 2

.ion-logo-whatsapp:before { 
    color: green; 
} 
.ion-md-share:before { 
    color: color($colors,favorite); 
} 
.ion-md-close:before { 
    color: red; 
} 

image

Answer 3

ionic.cssでこのクラスを更新してみてください。

app.scss：

.ion-logo-whatsapp:before { 
    color: green; 
} 

Answer 4

あなたのscssファイルでは、あなたはmuあなたのアクションシートがページにないため、ページ・グループのうち番目の移動「.action-シート・グループ・ページ」のクラスは、{}あなたは代わりに

groups.scss

page-groups { 
    ion-content{ 
     .settitle{ 
      font-size: 70%; 
      color: grey; 
     } 
     button.iconmore{ 
      font-size: 80%; 
      color: grey; 
     } 
     ion-col.rightcol{ 
      direction: rtl; 
     } 
     p.content{ 
      font-size: 90%; 
      color: grey; 
     } 
    } 

} 

.action-sheets-groups-page { 
    .icon-edition { 
     color: grey; 
    } 
    .icon-erase { 
     color: grey; 
    } 
    .action-sheet-cancel ion-icon, 
    .action-sheet-destructive { 
     color: grey; 
    } 
}