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

有小伙伴说这方法不行了,我试了一下还是可以的。可能原因是样式那里。如有错误,请多斧正,谢谢。

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

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

这里写图片描述

然后点击最右上角的购物车,选择svg图可以选择自己想要的颜色。点击:下载素材,选择svg,注意不要选png。png图在浏览器上显示正常,放到手机上就会失真的。把svg图片下载下来。

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

在theme文件夹中,创建文件icons.scss,便于管理
写入样式(注意图片的路径不要错):

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

注意:myIcon是自己起的图标名称,前面的不要改。

第三步:
导入到variables.scss中!必须滴。

@import "./icons";

直接在模板中使用!简单吧


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

效果图:


这里写图片描述

Tab图标的使用:

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

1.加入样式:

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

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

上面的样式有点复杂,错了就显示不出了,有小伙伴没显示可能就是这里,我把自己的理解写写。首先是属性选择器:[aria-selected=true],表示tab被选中。子选择器:一个空格接着后面的样式,最后是伪类。
然后我们可以打开控制台,选中一个tab看看:


image.png

由最简单的原生元素封装而来,这就一个tab的全部。我们可以看到样式:ion-md-myIcon-outline,它的由来就是:ion-+ 平台 + -tabIcon的值组成的,如果你改变tabIcon的值:
image.png

那么可以看到样式名也跟着改变:
image.png

把两边的样式对应起来我们就可以知道,这似乎就像我们最开始写的简单的css那样:在css文件中写css,在元素中绑定。不是吗?

另外,你想单个使用时,前面第二步中的那些样式同样是不可以少的。

2.同样在模板中直接用

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

效果图:

未选中时:


这里写图片描述

选中时:


这里写图片描述

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 122,731评论 15 534
  • 2019-01-10更新:鱼猫的个人博客上线啦!鱼猫的个人博客欢迎点击查看哟! 说明:这篇文章介绍的方法步骤比较多...
    鱼猫啊阅读 3,445评论 9 13
  • 发现自己其实拥有间歇性人格,比如有一段时间我会坐的特别正,举手投足之间是经过我的理解特别处理过的一种大家风范,那是...
    南琦阅读 68评论 0 0
  • 手三阴、手三阳的走向和位置 一:手太阴肺经——从胸走手,行于上肢前外侧缘,分两条路径。 位置——1、中焦至大指端的...
    侠骨丹心阅读 11评论 0 0
  • 已经连续2年在业余时间都坚持有规律的去健身房。健身房是我觉得去过的最棒的场所之一,在这里,通过运动我慢慢变的开朗...
    陳慢言阅读 382评论 5 9