第一步,你把你的项目的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是.前缀-图标名字{样式},好了赶紧改吧

东西写的有点赶脚,有不懂的地方或是不对的地方大家可以告诉我

可以参照这个文档来进行修改 http://download.csdn.NET/detail/findsafety/9127337

需要用到的文件有3个

1 fonts文件夹下面的所有文件

2 style.css

3 demo-files文件夹下面的demo.css

只有上面几个都完整的时候,才能正常使用到SVG图标

另外一点,自己制作的SVG图标可能会出现在https://icomoon.io/app/#/select上传完成的时候发现是一片空白,原因在于SVG图片制作不符合要求,详情见http://www.zhihu.com/question/24513579

替换 ionic 中的 图标的更多相关文章

  1. ionic中修改图标的问题

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

  2. 在ionic3+angular4项目中添加自定义图标

    在阿里图标库下载自己所需要的图标解压为一下目录 把iconfont.xx文件全部放到src/assets/fonts/文件夹下,可以全部替换里面的文件,但是要把之前iconfont.css文件下的文件 ...

  3. 使用Font Awesome替换你的网站图标

    http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 ******************IE7BUG ...

  4. iOS如何在应用中添加图标更换功能

    一.在info.plist中设置图标信息 首先将需要更换的图标按照下面的方式声明,以便我们能够正常调用文件和方法.注意,每个图标的图标名称和对应的文件名要一一对应. 二.在工程根目录下添加图标文件 图 ...

  5. 解决 ionic 中的 CORS(跨域)

    译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^) 如果你通过 ionic serve 或者 ionic run 命令使用或 ...

  6. myeclipse中svn图标状态不显示问题的解决办法

    myeclipse中svn图标状态不显示问题的解决办法 博客分类: svn SVNMyeclipse工作WindowsC  myeclipse中使用 svn 插件,原本正常,未作任何更改,突然有一天, ...

  7. 在Linux(Luna)下向Launch启动器中添加图标

    记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...

  8. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    [源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...

  9. Java关于Properties用法(二)——替换配置文件中的参数

    上一章讲了配置文件的基本用法,虽然上一章已经可以解决一些需求,但还不些不足之处.假如,配置文件里面的字符串有一部分需要经常变动,另外一些不需要,上一章的方法就不方便了,所以这章主要讲如何在配置文件中使 ...

随机推荐

  1. 云计算大会有感—MapReduce和UDF

    (转载请注明出处:http://blog.csdn.net/buptgshengod) 1.參会有感       首先还是非常感谢CSDN能给我票,让我有机会參加这次中国云计算峰会.感觉不写点什么对不 ...

  2. 怎样用Java代码来把SSL的证书自己主动导入到Java的秘钥存储文件(keystore)

    我们在开发或者使用SSL的过程中,非常多的软件须要我们提供java的keystore.特别是一些基于Java的中间件产品. 我们常规的做法是JDK自带的工具命令(keytool)去做.比方,以下的样例 ...

  3. 深入理解 Java中的 流 (Stream)

    首先,流是什么? 流是个抽象的概念.是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以"流"的方式进行.设备能够是文件,网络,内存等. 流具有方向性,至于是输入 ...

  4. 【转】教你用C#读写、删除、更新excel表格记录

    文章出处:http://blog.csdn.net/kuangshazi515/article/details/6585118 如下图所示,编一个程序,鼠标单击窗体视图区(右边)时,获取一对坐标(X, ...

  5. 在使用完全拷贝过来的类文件(带xib文件)时,要及时修改 File's Owner

  6. Python 必备神器

    1. pip 用来包管理 文档:https://pip.pypa.io/en/latest/installing.html # 安装,可指定版本号(sudo) pip install Django== ...

  7. python各个模块循环引用问题解决办法

    当项目中的模块过多,或功能划分不够清晰时会出现循环引用的问题,如下 有两个模块moduleA 和 moduleB: #moduleA from moduleB import b def a(): pr ...

  8. Objective-C:协议protocol

    六.协议(protocol) 关键字:@optional.@required (1)是一个类共享的一个方法列表 (2)它声明了一系列的方法而不进行实现 (3)遵从某个协议,就是需要实现协议中的方法 ( ...

  9. C++中List的用法

    Lists将元素按顺序储存在链表中. 与 向量(vectors)相比, 它允许快速的插入和删除,但是随机访问却比较慢. assign() 给list赋值 back() 返回最后一个元素 begin() ...

  10. Android数据存储之SQLite

    SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,占用资源非常少,只有几百KB内存.支持Windows/Linux ...