(转自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. 使用wex5得到的一些教训

    博主一直都是做web开发,前段时间有个小想法,想给自己做个android小应用(很小,功能特别简单). 了解到可以用js直接做,貌似很简单,选用了wex5(基于codova插件)来直接开发. 最终发现 ...

  2. springMVC之<context:annotation-config />标签

    springMVC的配置文件中经常见到<context:annotation-config/>,那么这句话的作用到底是什么呢? 现在的注解非常方便,但是系统如何才能识别注解呢,这就需要相应 ...

  3. Android Studio打开时提示ADB错误的问题

    如图所示,ADB连接错误,解决办法很简单:打开cmd,定位到sdk文件夹下的platform-tools,然后执行adb kill-server回车:再执行adb start-server即可

  4. MFC listcontrol导出excel表格

    // 导出ExcelCString CBackGroundDlg::ExportAsExcel(CString filename, CListCtrl &resultlist, CWnd * ...

  5. 进程间通信--fork函数

    #include <unistd.h> pid_t fork(void); fork() creates a new process by duplicating the calling ...

  6. ng-Enter指令

    app.directive('ngEnter', function() { return function(scope, element, attrs) { element.bind("ke ...

  7. CI关于自动加载

    /application/config/autoload.php文件中定义自动加载的包.类库.helper.用户配置文件.语言文件.模块 类库会到/application/libraries目录或/s ...

  8. python进阶笔记 thread 和 threading模块学习

    Python通过两个标准库thread和threading提供对线程的支持.thread提供了低级别的.原始的线程以及一个简单的锁.threading基于Java的线程模型设计.锁(Lock)和条件变 ...

  9. android activity改变另一个activity ui

    android开发之在activity中控制另一个activity的UI更新   转自:http://www.cnblogs.com/ycxyyzw/p/3875544.html 第一种方法: 遇到一 ...

  10. LeetCode 7 -- String to Integer (atoi)

    Implement atoi to convert a string to an integer. 转换很简单,唯一的难点在于需要开率各种输入情况,例如空字符串,含有空格,字母等等. 另外需在写的时候 ...