自定义图标分享心得
发布于 1年前 作者 zhanyz 2049 次浏览 来自 分享

有时候我们需要修改tabs或者其他的ionic的图标,虽然ionic系统提供了很多,但如果想使用其他的,之前以为只能用png来设置background,但效果并不好;最近发现了很好的方法,跟大家分享。 是无意中看到这个帖子 add icons 才发现的。 1、两个网站 一个是 阿里图标库 这里面几乎能满足很多人的需要了 一个是 icomoon 下面提到

2、ionic提供给我们的icon主要是放在www/lib/ionic/fonts/ 目录下的4各文件:ionicons.eot ionicons.svg ionicons.ttf ionicons.woff实现的,至于这四个文件是啥我也不是很懂,然后在ionic.css里面有定义各个图标;所以我们自定义的图标也应该一样,找到方式就剩怎么生成这4个文件(下面我叫它们“四贱客”)。

3、上面所说的icomoon这个网站主要就是用来生成“四贱客”用的,需要的原材料就一个svg文件够了,一般来说我是去阿里图标库上来找到的,你也可以去其他地方找,只要是svg文件,这里我下载了6个,一正一反共3对。 49D97668-87FD-4829-B7CD-9C8D87D98C7D.png

打开icomoon网站,注意看右上角有个 IcoMoon App ,点击进入到我们生成“四贱客”的地方。 canvas.png

左上角有个 Import Icons 按钮,上传刚刚下载的svg文件,上传完成后还需要勾选上(不勾选上的边框是灰色的),如果不勾选上则生成的“四贱客”是不包含这个图标的。然后点击右下角的 Generate font按钮来生成“四贱客”。 canvas1.png

生成“四贱客”成功后,icomoon会有一个24小时有效的css链接提供测试,当然我们需要的是下载“四贱客”,点击右下角的 Download下载“四贱客”压缩文件,至此,生成“四贱客”就完成了。 canvas2.png

下载文件解压后,里面的fonts目录就是“四贱客”的存放的地方,还有个style.css,是类似ionic.css定义的文件,我们把fonts和style.css拷贝到ionic项目中,我这里是把fonts合并到www/lib/ionic/fonts/目录,style.css重命名为icomoon.css并放到www/lib/ionic/css/ 目录下,在index.html引入icomoon.css。 89FBC87C-B79F-42BE-B1BC-39399410410E.png

3F3E9CD5-A04D-4934-874B-7FCBF491E8EE.png

在tabs.html中使用就不多说了。 08CB0831-D548-46A4-BFC2-B878D4C1E94B.png

PS:这里要修改的一个小地方,打开icomoon.css,顶部的@font-face的src引用路径要正确,并且要把单引号改为双引号,不然显示不出来(不知道什么原因)。 BB19B7DA-3DD9-43E8-9B4F-491C0E40D72D.png

最后效果图: AB09C4BA-A354-46B5-A8A1-E391588F78AF.png

1 回复

你那个文件上传下载的能不能说详细一下,我的显示这个错误 untitled1.png, 还有这个 untitled2.png是什么意思,谢谢指点

回到顶部