如何更改离线操作表中自定义图标的颜色？

Question

我想更改以下操作表中嵌入的自定义图标（使用IcoMoon生成）的颜色。我正在使用Ionic Framework版本：3.1.1

这是查看与视图相关的三个文件的方式：

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

groups.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中添加样式：

app.scss：

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

Answer 2

该键是在global.scss中设置样式的，因为此操作表是从页面外部加载的。

Answer 3

尝试在ionic.css中更新此类

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

Answer 4

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

image

Answer 5

在您的scss文件中，您必须将“.action-sheets-groups-page”类移出页面组{}，因为您的操作表不在您的页面中 你应该有

<强> 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;
    }
}

Answer 6

Ionic 4解决方案操作表按钮文本颜色更改

1. 您必须将CSS类添加到按钮，例如example.page.ts

   中的以下示例

   buttons: [{
       text: "Price : High to Low",
       icon: "arrow-round-up",
       cssClass: "dark", // css name can be anything
       handler: () => {
           this.getSortProducts("High to Low");
       }
   }]
   

2. 将CSS放入global.scss

   .dark {
     color: black !important;
   }
   

它仅在global.scss上有效，因为此操作表是从页面外部加载的。

谢谢

Answer 7

// in component ts      
  async presentActionSheet(body) {
            const actionSheet = await this.actionSheetController.create({
              header: "Options",
              buttons: [
                {
                  text: "Add More Item",
                  icon: "add",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.OpenTopupModal(body);
                  },
                },
                {
                  text: "Update Use Item",
                  icon: "pencil",
                  cssClass: 'example', // <- add css class here only
                  handler: () => {
                    this.openUsedItemModal(body);
                  },
                },
        ...
    
    
    in global.scss
    
    .example .action-sheet-icon {
      color: #1e3d6e !important;
    }