离子 - 显示错误的图标

Question

我正在尝试将ionicons.com中的图标合并到我的应用上。我从github下载了代码并添加到我的应用程序中，但是我遇到了问题。我将图标类定义为离子警报，并显示 ion-android-add-circle 。其他图标也是如此。见图：

我的代码片段，其中我使用离子警报类设置图标

在private void PlaceElementOnCavas(UIElement element, Point point) { Canvas.SetLeft(element, point.X); Canvas.SetTop(element, point.Y); // Add the event to allow the user to press delete and remove the control element.KeyDown += (sender, e) => { if (e.Key == Key.Delete) { this.designCanvas.Children.Remove(element); } }; this.designCanvas.Children.Add(element); } 命令之后，我得到了这个输出：

Answer 1

从ionicons.com和/docs/ionicons/使用时，我遇到了问题 对于提醒图标，无需使用ionicons.com，请直接使用https://ionicframework.com/docs/ionicons/

中的警告图标

 <ion-icon name="warning"></ion-icon>

并删除index.html上的ionicons.min.css（重要）

所以你永远不会有错误的图标问题。

Answer 2

如果不使用已经包含它的Ionic框架，我想这就是vusan的答案，那么Ionicons推荐的usage现在是：

1. 在您的应用或页面https://unpkg.com/ionicons@4.5.0/dist/ionicons.js
中加载其JavaScript
2. 使用离子网组件<ion-icon name="warning"></ion-icon>

一切都是幸福。绝对比旧的fonts + classes方法好。