(转自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. 笔记:linux下mysql设置utf-8编码方法

    一:查看mysql版本 1.1 mysql –V 在终端界面输入上面命令.显示如下: mysql Ver 14.14 Distrib 5.5.35, fordebian-linux-gnu (x86_ ...

  2. 为Informix数据库开启事务

    1.首先在Informix数据库安装根目录的etc文件夹下找到名为ONCONFIG.on_xxxx的配置文件: 2.打开ONCONFIG.on_xxxx文件,在第409行的位置找到TAPEDEV \\ ...

  3. android editText 监听事件

    在软键盘中注意 在监听的 edittext中 使用android:imeOptions属性的时候,一定要对EditText设置 android:inputType 或者 设置 android:sing ...

  4. linux输出 /dev/null

    在学习Linux的过程中,常会看到一些终端命令或者程序中有">/dev/null 2>&1 "出现,由于已经遇到了好几次了,为了理解清楚,不妨花点时间百度或者g ...

  5. LRU Cache实现

    最近在看Leveldb源码,里面用到LRU(Least Recently Used)缓存,所以自己动手来实现一下.LRU Cache通常实现方式为Hash Map + Double Linked Li ...

  6. 有关javascript的性能优化(合理的管理内存)

    使用具备垃圾收集机制的语言编写程序,开发人员一般不必操心内存管理的问题.但是,Javascript在进行内存管理及收集时面临的问题是有点与众不同.其中最主要的一个问题是分配给Web浏览器的可用内存数量 ...

  7. .Net生成HTML的三种方法

    一.在服务器上指定aspx网页,生成html静态页 public partial class Default2 : System.Web.UI.Page { protected void Page_L ...

  8. GoLang 通过http Post获取数据

    func GetPostResponse(url, bodyType string, body *[]byte) (rdata []byte, err error) { b := bytes.NewB ...

  9. SparkSQL读取Hive中的数据

    由于我Spark采用的是Cloudera公司的CDH,并且安装的时候是在线自动安装和部署的集群.最近在学习SparkSQL,看到SparkSQL on HIVE.下面主要是介绍一下如何通过SparkS ...

  10. Mac下使用firefoxdriver

    Mac使用Firefox浏览器只需要设置WebDriver driver = new FirefoxDriver(),不需要安装firefoxdriver,前提是你的Firefox被安装在默认的位置. ...