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好吧 哈哈!
与其坐以待毙,不如自己现在努力.