(转自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里面的图标的更多相关文章

  1. 转:js小技巧 ,将彻底屏蔽鼠标右键,可用于Table ,取消选取、防止复制,IE地址栏前换成自己的图标

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...

  2. ionic 添加应用图标与启动页

    由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...

  3. ionic中修改图标的问题

    有两种修改图标的方法,一种是手动配置,另外一种是使用命令 1.手动配置 把图标icon.png复制到resources\android\icon目录下 修改根目录的config.xml文件 <p ...

  4. 替换 ionic 中的 图标

    第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面 第二步,点击下载后,出现这个页面,修改前缀 ...

  5. [EasyUI美化换肤]更换EasyUi图标

    前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式. ...

  6. ionic ios发布图标启动也不能正确加载问题

    前两天发布ios的时候发现ios安装的图标和启动页的时候不能正确显示,重新发布也不能正确显示,修改方法 在ionic build ios --release之前执行ionic resources即可

  7. 换掉Tomcat默认图标

    将<Tomcat_home>下的/webapps/ROOT的favicon.ico替换成你自己的图标,名还得是这个名. 然后清除浏览器缓冲,webapp默认的小猫图标就被换掉了. 效果如下 ...

  8. Ionic 生成icon图标

    1.直接切换到项目跟目录 运行以下命令 备注:运行第一次ionic rescoures 后自动生成文件夹rescoures ,让后帮你自己的icon.png 文件放进入就ok ,在次运行ionic r ...

  9. ionic入门之色彩、图标、边距和界面组件:列表

    目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...

随机推荐

  1. Java 找不到主类错误

    Eclipse 运行java 程序,突然出现错误:没有或找不到主类. 在网上找了好多办法,都不行. jdk环境配置啊-->这个一般不会出错,因为以前都不会出现这种问题. 查看项目配置啥的--&g ...

  2. Java线程池使用说明

    Java线程池使用说明 转自:http://blog.csdn.net/sd0902/article/details/8395677 一简介 线程的使用在java中占有极其重要的地位,在jdk1.4极 ...

  3. 关于C#的内存释放问题

    最近在做一个要循环读取xml文件的功能. 想法是读取一个文件,释放一个文件,这样就不会消耗太多内存. 结果运行起来内存不停涨,最后内存溢出.用gc,disponse,异步都没有用. 后来改成relea ...

  4. php 常用数组操作

    php常用的数组操作函数,包括数组的赋值.拆分.合并.计算.添加.删除.查询.判断.排序等 array_combine 功能:用一个数组的值作为新数组的键名,另一个数组的值作为新数组的值 <?p ...

  5. 场景5 Performance Management

    场景5 Performance Management 性能调优(不能重启数据库) 索引 资源管理器 性能优化 统计分析 SQL性能分析 SPM (SQL执行计划管理) 堆表 :数据存储无序 位图索引 ...

  6. Activity中获取当前Fragment 中的子控件

    XXXAdapter中 增加 public Fragment currentFragment; @Override public void setPrimaryItem(ViewGroup conta ...

  7. Thinkphp 带查询条件数据分页

    //查询条件中如果有中文 $keyword= urldecode(I("request.keyword")); if ($keyword!=""){ $Mode ...

  8. KTV项目 SQL数据库的应用 结合C#应用窗体

    五道口北大青鸟校区 KTV项目 指导老师:袁玉明 歌曲播放原理 SQL数据库关系图 C#解决方案类图 第一步:创建数据库连接方法和打开方法和关闭方法! public class DBHelper { ...

  9. qt做触摸屏演示程序

    界面效果图: 参考资料: http://blog.csdn.net/orz415678659/article/details/9136575     这个最重要.. https://www.oschi ...

  10. Frame动画实战

    Android动画分为Tween动画和Frame动画,Tween动画主要包括图片的放大缩小.旋转.透明度变化.移动等等操作:Frame动画则简单得多了,就是把一张张的图片连续播放产生动画效果. 本节主 ...