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

Question

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

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

但自从 Ionic 3 以来，title/text 属性仅限于字符串，这不再起作用。

我还尝试了将那些 fontawesome 图标作为 png，然后将它们用作自定义 css 背景，就像在这个 Stackoverflow Question 中一样，但这也不起作用。图像只是不显示。

所以我最终使用了 ionic 作为图标提供的那些 ionicons，如下所示：

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 Buttons 中添加 fontawesome 图标吗？我似乎找不到任何有用的帮助。

Answer 1

我建议做一个与如何更改 ion-tabs 中的图标类似的事情。 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 中的路径。