基于平台的离子图标(不起作用)

时间:2016-10-19 15:21:34

标签: cordova ionic-framework ionicons

我正在制作Ionic / cordova应用程序,我正在尝试使用Ionic图标。我注意到,当使用'ios'命令时,它可以完美地工作,但在使用泛型或md名称时则不然。在这些情况下,没有图标可见。 我想让它自动选择每个平台的最佳图标(根据文档应该做什么)

标签示例

我有第一个标签的代码:

<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>)

=&GT;图标可见

但是在使用通用或材料设计名称时:

<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>)

=&GT;图标丢失

按钮示例

<button class="button button-icon ion-person-outline"></button> =&gt;没有图标
<button class="button button-icon ion-ios-person-outline"></button> =&gt;工作
其他图标(如条形码和列表)的行为相同。

有一个例外没有ios,那就是'加'图标:
<button class="button button-icon ion-plus"></button> =&gt;作品! “
很奇怪,根据documentation我应该使用ion-add,但这也没有给出任何图标。

使用ion-icon

使用ion-icons根本没有图标(当我检查DOM时,它也显示宽度和高度为0)
<ion-icon name="add"></ion-icon> =&gt;没有图标
<ion-icon name="plus"></ion-icon> =&gt;没有图标

供参考,我正在使用Visual Studio, Cordova CLI 6.2.0和文件/css/ionic.app.css说'Ionicons,v2.0.1'

我做错了什么?

1 个答案:

答案 0 :(得分:0)

好的,我的坏。我使用的是Ionic 1框架,而图标上的在线文档是针对版本2.我现在正在迁移到v2。