ionic2 如何用自定义的图标

首先 我们现在用ionic2的图标都是下面这样写的对吧

<ion-icon  name="home"></ion-icon>


但是现在我想用自己的自定义的图标咋办呢

1.首先准备好自己的svg图标,这个图片如何做我就不说了,自己去找美工告诉需求或者自己下载个软件自己做也行
2.然后去打包网站去打包,https://icomoon.io比如这个 网上一大推呢
3.打包完以后会是下面这样的文件格式


4.然后把文件放到相应位置assets这个文件夹下那个demo.html和read.me还有selection.json不想放就不用放了
5 把文件里的style.css在index.html中写上路径 eg: <link href="assets/icomoon/style.css" >大约是这个样子 (一定要写正确路径的哦)

6.好了 大功告成
直接在里面写
<ion-icon class="你的图片名字"></ion-icon>


7.这会就会有人有疑问 为什么人家ionic2是写的name你写的是class呢


8.别担心 咱另有高招,这时候你看你的目录下的app.component这个文件有没有链接的sass文件,如果没有链接一个,如果有 嘿嘿那就好了
直接在里面写

这个@include maleIcon(icon-bar,'e900');
这个是sass函数 我在调用这个函数并且给他相应的值,
这样我就能这么用了



完美的解决了自定义图标的的问题,还能装逼的写name好吧 哈哈!
 




posted @ 2016-12-24 17:06  小贺说IT  阅读(308)  评论(0)    收藏  举报