27
2017
09

ionic3自定义icon图标(简单版!!)

在网上找了几篇文章来看,步骤多,觉得很麻烦。经过自己的实践后,总结了自己的方法。本来想贴出参考的那篇文章的地址的,但我跟作者说了我的方法后,第二天他就把文章给删了。额。。。

第一步,我们可以去阿里图标网找我们要的图标:
http://www.iconfont.cn/
这里写图片描述

然后点击最右上角的购物车,可以选择自己想要的颜色。点击:下载素材,就可以把png图片下载来了了。

第二步:在assets文件夹下创建一个fonts文件夹,在fonts文件夹内最好也创建个png文件夹,然后把png图放到里面。

在theme文件中,创建文件icons.scss,便于管理
写入样式:

.ion-ios-myIcon:before { content: url("../assets/fonts/png/people-fill.png");}
.ion-ios-myIcon-outline:before { content: url("../assets/fonts/png/people.png"); }

注意:ios-myIcon是自己起的图标名称,不知为何前面要加ios或者md平台,否则不显示,加就加吧。

第三步:
导入到variables.scss中!必须滴。
@import “./icons”;

直接在模板中使用!


<ion-icon name="ios-myIcon"></ion-icon>
  <ion-icon name="ios-myIcon-outline"></ion-icon>

效果图:
这里写图片描述

Tab图标的使用:
tab图标,说白了就是两个图标,一个填充的和一个outline的通过样式来切换。
在下载的时候,我们找两个对应的就行了,如上面的人头图标,两个都下载下来。

1.加入样式:

.tab-button[aria-selected=false] .ion-ios-myIcon-outline:before { content: url("../assets/fonts/png/people.png"); }
.tab-button[aria-selected=true] .ion-ios-myIcon-outline:before { content: url("../assets/fonts/png/people-fill.png");}

注意:图标名称都是ios-myIcon-outline,当aria-selected=false时,显示outline的图标,
为true(被选中)时显示fill/填充的图标。注意,你想单个使用时,前面第二步中的那些样式同样是不可以少的。

2.同样在模板中直接用

<ion-tab [root]="tab2Root" tabTitle="Img" tabIcon="ios-myIcon-outline"></ion-tab>

效果图:
未选中时:
这里写图片描述
选中时:
这里写图片描述

另外,如果图标库没有你想要的图标,UI制作应该也可以用。我还没试,成功了的告诉我一声。哈~

上一篇:Android TV 焦点移动飞框的实现 下一篇:Flexbox简介