如何更改 ion-icon 的标题？

Question

我正在尝试更改出现在 mouse-hover 上的 ion-icon 标题。
示例：
我已经尝试了至少几个小时来找到解决方案。我只是不知道如何通过 css 访问 ion-icon 的标题元素，以便能够将其内容更改为 'Edit' 而不是 'Create'。任何帮助将不胜感激。

Answer 1

您可以尝试使用 CSS 事件阻止来禁用 ion-icon 弹出窗口并将“标题”属性设置到 parent 元素。

CSS

ion-icon {
 pointer-events: none;
}

或者您可以使用以下代码创建图标元素作为解决方法并将其设置在按钮上。

const icon = <Icon icon='arrow-right' title={false} />;
return <Button minimal icon={icon} title='Next' />;

详情在这里 - https://github.com/palantir/blueprint/issues/2321

Answer 2

禁用事件：

ion-icon {
    pointer-events: none;
}

并使用 title 属性用 span 标签包裹图标：

<span title="Edit" style="font-size: x-large;">
  <ion-icon name="create"></ion-icon>
</span>

Answer 3

Ionic 5 - 只需将其包裹在 div 中，如下所示：

<div (click)="presentActionsPopover($event, obj)" slot="end" title="Actions" size="small">
      <ion-icon name="ellipsis-vertical-outline" slot="icon-only"></ion-icon>
    </div>

Answer 4

试试下面的方法：

<ion-button title="Create Project">
<ion-icon  name="create"></ion-icon>
</ion-button>

如何更改 ion-icon 的标题？

How to change title of an ion-icon?

html

css

ionicons