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

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

据我所知，你可以例如在你的 actionsheet 按钮的 title/text 属性中添加这段代码：<i class="fas fa-ad"></i>，然后图标就会出现。

但自从 Ionic 3 之后，title/text 属性仅限于字符串，这不再可行。

我也尝试过将那些 Fontawesome 图标作为 PNG，然后像在这个 Stackoverflow 问题中一样用作自定义 CSS 背景，但这也不起作用。图片就是显示不出来。

所以我最终只是使用了那些由 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();
  }
}

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

答案＃1

我建议做类似于你可以在 ion-tabs 中更改图标的方式。Ionic 论坛（带有自定义 SVG 的 ionic tabs）基本思路是让 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 中的路径。