Question

我在Ionic3的ActionSheet按钮中使用来自Fontawesome的自定义图标的问题。

据我所知，您可以添加以下代码： <i class="fas fa-ad"></i> 在操作表按钮的title/text属性中，图标就会出现。

但是自从Ionic 3以来，title/text属性被限制为仅字符串，并且不再起作用。

我也尝试将那些fontawesome图标用作png，然后像Stackoverflow Question一样将它们用作自定义css背景，但这也行不通。图像只是不显示。

所以我最终使用了由离子作为图标提供的那些离子子，像这样：

import { Component } from '@angular/core';

import { Platform, ActionSheetController } from 'ionic-angular';


@Component({
  templateUrl: 'basic.html'
})
export class BasicPage {
  constructor(
    public platform: Platform,
    public actionsheetCtrl: ActionSheetController
  ) { }

  openMenu() {
    let actionSheet = this.actionsheetCtrl.create({
      title: 'Albums',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          icon: !this.platform.is('ios') ? 'trash' : null,
          handler: () => {
            console.log('Delete clicked');
          }
        },
        {
          text: 'Share',
          icon: !this.platform.is('ios') ? 'share' : null,
          handler: () => {
            console.log('Share clicked');
          }
        },
        {
          text: 'Play',
          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
          handler: () => {
            console.log('Play clicked');
          }
        },
        {
          text: 'Favorite',
          icon: !this.platform.is('ios') ? 'heart-outline' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
}

你们知道如何在ActionSheet按钮中添加惊人的图标吗？我似乎找不到任何有用的帮助。

Answer 1

我建议做类似的事情来改变离子标签内的图标。 Ionic Forum (ionic tabs with custom svgs)的基本思想是让Ionic承担繁重的工作，以设置html和应用css标签。然后，您只需将svg放在其字体图标（Ionic 3）所在的位置，但使用的图标集中不存在名称。这可以在您的app.scss

中完成

ion-action-sheet {
  ion-icon {
    width: 3rem;
    height: 3rem;
  }

  .ion-ios-trash-solid,
  .ion-md-trash-solid {
    content: url(../assets/icon/trash-solid.svg);
  }

  .ion-ios-share-alt-square-solid,
  .ion-md-share-alt-square-solid {
    content: url(../assets/icon/share-alt-square-solid.svg);
  }

  .ion-ios-play-solid,
  .ion-md-play-solid {
    content: url(../assets/icon/play-solid.svg);
  }

  .ion-ios-heart-regular,
  .ion-md-heart-regular {
    content: url(../assets/icon/heart-regular.svg);
  }

  .ion-ios-times-solid,
  .ion-md-times-solid {
    content: url(../assets/icon/times-solid.svg);
  }
}

然后可以使用

创建操作表

let actionSheet = this.actionsheetCtrl.create({
    title: 'Albums',
    cssClass: 'action-sheets-basic-page',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: 'trash-solid',
        handler: () => {
          console.log('Delete clicked');
        }
      },
      {
        text: 'Share',
        icon: 'share-alt-square-solid',
        handler: () => {
          console.log('Share clicked');
        }
      },
      {
        text: 'Play',
        icon: 'play-solid',
        handler: () => {
          console.log('Play clicked');
        }
      },
      {
        text: 'Favorite',
        icon: 'heart-regular',
        handler: () => {
          console.log('Favorite clicked');
        }
      },
      {
        text: 'Cancel',
        role: 'cancel',
        icon: 'times-solid',
        handler: () => {
          console.log('Cancel clicked');
        }
      }
    ]
  });
  actionSheet.present();

如果您要选择其他位置，还需要将所需的svg放入src / assets / icon或其他目录，并修改css中的路径。

Ionic3 ActionSheet：如何从Fontawesome使用自定义图标？

1 个答案: