ionic3 自定义图标

2019-01-10更新:鱼猫的个人博客上线啦!鱼猫的个人博客 欢迎点击查看哟!

说明:这篇文章介绍的方法步骤比较多,主要是在图标的准备那方面,对于这个,我重新写了一篇文章,步骤少一点,不需要去准备svg矢量图再转换成字体图标,有兴趣的可以看看《ionic3 自定义图标-鱼猫的个人博客》


     用了一段时间的ionic3,开发体验还是不错的。相比ionic1来说好了很多,开发过程让人舒服很多。但期间遇到一些问题,其中一个就是ionic3提供的图标有点少,有点满足不了需求,所以这时候用到自定义图标。以下

    已经用ionic3的童鞋应该会发现,ionic3现在使用图标的方式基本都是使用<ion-icon>这个组件,在加上相应的name属性,这个name对应的就是字体图标的名字,ionic便会在使用该组件的地方渲染出图标。那么,按照这种做法,我们也可以使用自定义的字体图标,代替ionic的图标库,完成自己的需求。

准备工作

    首先,准备好图标的svg的矢量图标


        有些童鞋可能会不明白怎么弄svg,这里介绍一个网站,相信很多人都知道,就是阿里云矢量图标网Iconfont-阿里巴巴矢量图标库,登录帐号好将想要的图标添加到购物车,然后下载素材,其中就有一个选项是下载svg格式的。

生成字体图标

进入icomoon网站使用svg图片生成字体图标



使用生成的字体图标

将下载的压缩包解压,把其中的fonts文件夹导入项目的assets文件夹中,并将解压得到的style.css文件重命名,改为icons.scss,并复制到src/assets/fonts文件夹下

修改icons.scss中@font-face的文件引用路径


修改字体公共样式

原代码

修改后


注:我们将[class^="ion-"], [class*=" ion-"] 选择器改为类,并让字体图标类去继承,因为使用[class^="ion-"], [class*=" ion-"] 选择器会影响ionic自带的图标库

修改字体图标

修改前


修改后


注:在ionic3中引用图标主要靠名称来引用,因为我项目已经声明为ios模式,所以类名都是ion-ios-*,其中像.ion-ios-user-outline这种是tab未被选中时的样式,每一个图标类后面必须再加一个-outline的类,不然字体图标会无法显示。

最后,在src/theme/variables.scss 中导入icons.scss,我们就可以使用自定义的字体图标了

来看看效果吧


推荐阅读更多精彩内容

  • 常见图标有图像图标和字体图标两种,在移动端,字体图标对比图像图标有不少优点,所以一般采用字体图标为主。而字体图标的...
    IT晴天阅读 1,454评论 9 13
  • 首先说明,我是web前端开发的新手,高手忽喷!。最近开发一个微信商城,要用到很多图标,之前我都是用@×2雪碧图。但...
    Cola丶ZYQ阅读 852评论 1 2
  • 我在我们家算是最不爱打扫卫生的一个,我婆婆医生,每天擦两遍地,我妈每天扫三回地,我一周打扫一次,厨房每天擦一回。 ...
    李鸿枝brena阅读 75评论 0 0
  • 文/刘永成(原创) 经历了尘世的风餐路宿,人情冷暖,禁不住怀念那些经久难忘的美好时光,记忆的门一...
    雪花啤酒刘永成阅读 309评论 11 4
  • 相见时 相看两不厌 离别时 愿永不相见 缘深缘浅 终不过相见别离 缘起缘灭 早已是沧海桑田
    粟米妮妮阅读 42评论 0 1