码迷,mamicode.com
首页 > Web开发 > 详细

如何换ionic里面的图标(转自http://www.zcool.com.cn/article/ZMTM4NDQw.html)

时间:2016-05-10 14:10:43      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

(转自http://www.zcool.com.cn/article/ZMTM4NDQw.html)

第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面

技术分享第二步,点击下载后,出现这个页面,修改前缀,文件的名称

技术分享第三步,修改每个图标的名称,size值然后点击下载

技术分享我做的是安卓的APP所以修改的名字也是按照我自己的来的,你们也按照你们自己的来

第四步,下载下来的文件名字为icomoon压缩包,解压后应该是这样

技术分享

第五步重点来了,要注意呀,在你的项目里面找到fonts,把你下载下来的fonts文件覆盖到这个里面记得名字要一致

技术分享

第六步打开您icomoon文件的style.css

技术分享

第七步,看到这么个界面

技术分享第八步,在你的项目里面找到ionic.css文件

技术分享

第九步,打开

技术分享第十步,修改eot文件名称,如果名称一致就不用修改了;切记把我红框里面的SRC得修改了;

技术分享第十一步,把你生成的图标样式替换了原有的,有人问什么是图标的样式,看下面的图就知道了

技术分享

第十一步,保存下就可以看到你自己的图标了,再往下,我不知道这些是干嘛用的,但是介于跟图标有关系,所以我们就接着换,跟我一起来,找到_ionicons-font.scss,

技术分享

第十二步打开修改吧,相信您一定比我聪明

技术分享

第十三步,找到这个_ionicons-icons.scss

技术分享

第十四步,继续修改,发现什么规律了吗?这个就是咱们的图标命名,赶紧改吧

技术分享

第十五步找到_ionicons-variables.scss

技术分享

第十六步,就这么任性,继续修改,两个地方要修改,一个是前缀,如果跟第二步中写的前缀一样就不用修改了,另个修改的地方有点坑爹,$ionicon-var-android-car: "\e602";对照咱们下载的style里面的发现规律了吧,它这个是$ionicon-var-图标名字:图标样式;咱们的style是.前缀-图标名字{样式},好了赶紧改吧

技术分享

如何换ionic里面的图标(转自http://www.zcool.com.cn/article/ZMTM4NDQw.html)

标签:

原文地址:http://www.cnblogs.com/bear-ff/p/5477615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!