替换 ionic 中的 图标
第一步,你把你的项目的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 中的 图标的更多相关文章
- ionic中修改图标的问题
有两种修改图标的方法,一种是手动配置,另外一种是使用命令 1.手动配置 把图标icon.png复制到resources\android\icon目录下 修改根目录的config.xml文件 <p ...
- 在ionic3+angular4项目中添加自定义图标
在阿里图标库下载自己所需要的图标解压为一下目录 把iconfont.xx文件全部放到src/assets/fonts/文件夹下,可以全部替换里面的文件,但是要把之前iconfont.css文件下的文件 ...
- 使用Font Awesome替换你的网站图标
http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 ******************IE7BUG ...
- iOS如何在应用中添加图标更换功能
一.在info.plist中设置图标信息 首先将需要更换的图标按照下面的方式声明,以便我们能够正常调用文件和方法.注意,每个图标的图标名称和对应的文件名要一一对应. 二.在工程根目录下添加图标文件 图 ...
- 解决 ionic 中的 CORS(跨域)
译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^) 如果你通过 ionic serve 或者 ionic run 命令使用或 ...
- myeclipse中svn图标状态不显示问题的解决办法
myeclipse中svn图标状态不显示问题的解决办法 博客分类: svn SVNMyeclipse工作WindowsC myeclipse中使用 svn 插件,原本正常,未作任何更改,突然有一天, ...
- 在Linux(Luna)下向Launch启动器中添加图标
记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...
- 重新想象 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 ...
- Java关于Properties用法(二)——替换配置文件中的参数
上一章讲了配置文件的基本用法,虽然上一章已经可以解决一些需求,但还不些不足之处.假如,配置文件里面的字符串有一部分需要经常变动,另外一些不需要,上一章的方法就不方便了,所以这章主要讲如何在配置文件中使 ...
随机推荐
- redis的搜索组件 redis-search4j
redis-search4j是一款基于redis的搜索组件. 特点 1.基于redis,性能高效 2.实时更新索引 3.支持Suggest前缀.拼音查找(AutoComplete功能) 4.支持单个或 ...
- SQL 脚本中的全角逗号引起【ORA-01756: 引号内的字符串没有正确结束】
今天运行壹個小程序,功能是读取指定目录下的 SQL 脚本,并加载到内存中批量执行,之前的程序运行良好.但是今天相关开发人员更新了其中壹個 SQL 脚本,于是程序运行的时候就出错了,错误提示信息如下:批 ...
- C++STL源代码学习(之slist篇)
///stl_slist.h ///list为双向循环链表,slist为单向链表.某些操作效率更高 ///slist是SGI额外提供的单向链表,不属于C++标准 struct _Slist_node_ ...
- VS2010发布网站
- java反射知识点总结
一.java反射基础 1.1 什么叫java反射? 答:程序运行期间,动态的获取类的基本信息.比如:创建对象,调用类的方法,获得类的基本结构.这样给程序设计提供了很大的灵活性.个人总结就是:根据动态需 ...
- 汇编语言的Hello World
汇编语言的Hello World,汇编语言没有我想象的那么低级,它已经具备了不少高级语言的特性,代码也变得清晰,层次清楚,易于维护了. a.asm .386 .model flat,stdcall ...
- myeclipse 修改freemarker ftl 不重启tomcat
最 近的项目是SSH,View层采用Freemarker,但是遇到了一个很大问题,每次修改完ftl文件,都要重新启动tomcat才可以看到所修改的内 容,不但麻烦,而且浪费时间,特别怀念jsp,后来在 ...
- 将 MRC 项目转换为 ARC 项目
其实很简单,直接使用系统工具转换即可,以下是步骤: 1. 你之前的项目是MRC的 2. 里面有 release, dealloc 等. 3. 开始转化 4. 点击save转化完后,记得把工程重新设置成 ...
- (原)用WebBrowser浏览Office Web Apps Server,除去“下载”按钮
对,没错,如果你按关键字找到这篇随笔了,相信一定知道背景,以及我所说的是什么. 上一段子代码. private void timerHideButton_Tick(object sender, Eve ...
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正 ...