基于平台的离子图标(不起作用)
ion-icons based on platform (does not work)
我正在制作一个 Ionic/cordova 应用程序,我正在尝试使用 Ionic 图标。我注意到在使用 'ios' 命名时,它工作得很好,但在使用通用或 md 名称时却不行。在这些情况下,没有图标是可见的。
我想让它自动 select 每个平台最好的图标(根据文档应该做什么)
选项卡示例
我有第一个选项卡的代码:
<ion-tab title="tab1" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/list">
(converts to <i class="icon ion-ios-list" ng-if="getIcon()" style=""></i>)
=> 图标可见
但是当使用通用名称或 material 设计名称时:
<ion-tab title="tab1" icon-off="ion-list" icon-on="ion-list" href="#/tab/list">
(converts to <i class="icon ion-list" ng-if="getIcon()"></i>
or for md <i class="icon ion-md-list" ng-if="getIcon()" style=""></i>)
=> 缺少图标
按钮示例
<button class="button button-icon ion-person-outline"></button>
=> 无图标
<button class="button button-icon ion-ios-person-outline"></button>
=> 有效
其他图标(如条形码和列表)的行为相同。
有一个没有 ios 的例外情况,那就是 'plus' 图标:
<button class="button button-icon ion-plus"></button>
=> 有效! '
奇怪的是,根据 documentation 我应该使用 ion-add
,但也没有给出图标。
使用离子图标
使用 ion-icons 根本没有图标(当我检查 DOM 时,它也显示宽度和高度为 0)
<ion-icon name="add"></ion-icon>
=> 无图标
<ion-icon name="plus"></ion-icon>
=> 无图标
作为参考,我正在使用 Visual Studio,
Cordova CLI 6.2.0 和文件 /css/ionic.app.css 说 'Ionicons, v2.0.1'
我做错了什么?
好吧,我的错。我使用的是 Ionic 1 框架,而图标上的在线文档是针对版本 2 的。我现在正在迁移到 v2。
我正在制作一个 Ionic/cordova 应用程序,我正在尝试使用 Ionic 图标。我注意到在使用 'ios' 命名时,它工作得很好,但在使用通用或 md 名称时却不行。在这些情况下,没有图标是可见的。 我想让它自动 select 每个平台最好的图标(根据文档应该做什么)
选项卡示例
我有第一个选项卡的代码:
<ion-tab title="tab1" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/list">
(converts to <i class="icon ion-ios-list" ng-if="getIcon()" style=""></i>)
=> 图标可见
但是当使用通用名称或 material 设计名称时:
<ion-tab title="tab1" icon-off="ion-list" icon-on="ion-list" href="#/tab/list">
(converts to <i class="icon ion-list" ng-if="getIcon()"></i>
or for md <i class="icon ion-md-list" ng-if="getIcon()" style=""></i>)
=> 缺少图标
按钮示例
<button class="button button-icon ion-person-outline"></button>
=> 无图标
<button class="button button-icon ion-ios-person-outline"></button>
=> 有效
其他图标(如条形码和列表)的行为相同。
有一个没有 ios 的例外情况,那就是 'plus' 图标:
<button class="button button-icon ion-plus"></button>
=> 有效! '
奇怪的是,根据 documentation 我应该使用 ion-add
,但也没有给出图标。
使用离子图标
使用 ion-icons 根本没有图标(当我检查 DOM 时,它也显示宽度和高度为 0)
<ion-icon name="add"></ion-icon>
=> 无图标
<ion-icon name="plus"></ion-icon>
=> 无图标
作为参考,我正在使用 Visual Studio, Cordova CLI 6.2.0 和文件 /css/ionic.app.css 说 'Ionicons, v2.0.1'
我做错了什么?
好吧,我的错。我使用的是 Ionic 1 框架,而图标上的在线文档是针对版本 2 的。我现在正在迁移到 v2。