Как изменить цвет пользовательских значков в листе действий?

Я хочу изменить цвет пользовательских значков (сгенерированных с помощью 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;
        }
    }

}

заранее спасибо!! Я попытался следовать документации, но не мог, как это сделать.

css,ionic-framework,

1

Ответов: 4

1

Попробуйте добавить стили в app.scss:

app.scss:

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

Попробуйте обновить этот класс в ionic.css

.action-sheet-has-icons .icon {
color:/*whatever you want*/
}
0 
.ion-logo-whatsapp:before {
    color: green;
}
.ion-md-share:before {
    color: color($colors,favorite);
}
.ion-md-close:before {
    color: red;
}

образ

0

В вашем 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;
    }
}
CSS, ионно-рамки,
Похожие вопросы
Яндекс.Метрика