如何换ionic里面的图标(转自http://www.zcool.com.cn/article/ZMTM4NDQw.html)

(转自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是.前缀-图标名字{样式},好了赶紧改吧

时间: 2024-08-02 15:07:04

如何换ionic里面的图标(转自http://www.zcool.com.cn/article/ZMTM4NDQw.html)的相关文章

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

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false" 不

替换 ionic 中的 图标

第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面 第二步,点击下载后,出现这个页面,修改前缀,文件的名称 第三步,修改每个图标的名称,size值然后点击下载 我做的是安卓的APP所以修改的名字也是按照我自己的来的,你们也按照你们自己的来 第四步,下载下来的文件名字为icomoon压缩包,解压后应该是这样 第五步重点来了,要注意呀,在你的项目里面找到fonts,把你下载下来的fonts文件覆

ionic中修改图标的问题

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

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

前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式..我换个皮肤..就更不谈..) 其实重点看需求,我们主要做的后台项目对手机Web几乎没要求,所以,暂不考虑 效果图 上几张效果图先: 整体布局 树形菜单: 菜单列表: 改了之后还是可以的(毕竟我也不是专业的美工,我就是个.NET的开发..没办法..被逼的..).. 正文 其实我们引用EasyUI的时

Ionic 生成icon图标

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

转发-UI基础教程 – 原生App切图的那些事儿

UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切图虽然简单,但还是有很多地方需要注意的,下面由tgideas的 LV主唱大人 跟大家讲讲原生App切图的那些事儿,对UI入门或需了解APP切图的设计师来说会有帮助哦. 如何切图? 了解iphone界面的尺寸 最小的分辨率是320×480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所

滴滴顺风车设计总结(原创文章)

http://www.zcool.com.cn/article/ZMTcxOTYw.html   顺风车项目初期,产品GM反复和我们强调业务使命,私家车出行在滴滴体系中的角色,私家车市场规模,业务模式概述,业务模式关键词,目标体系. 使得我们很快明确了顺风车的产品定义,目标用户,主要功能,产品场景,产品特色和竞品的差异化以及未来顺风车的产品走向. 未来它将是一个每天改变千万人次出行的产品,它能让共享私家车成为一种连接人与人的生活方式. 我在网上收集资料,对顺风车已经有了一定的了解,当时国内的拼车

UI移动设备屏幕知识

今天同学给我了一个设计UI的软件,其实我是一头雾水的,有点孤陋寡闻了,设计UI还有这样的软件.百度了下,看见这篇文章还是很有收获的,原来UI还是一门如此高深的学问.把这篇文章和大家一起分享吧,希望你们能够得到一些帮助. 1.了解几个概念 (1)分辨率.分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800.720×1280.1080×1920等.720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素. (2)屏幕大小.屏幕大小是

PHP7YMAL扩展安装详细过程

9致802酉7浩xndhttp://www.zcool.com.cn/collection/ZMTg0NDc2NjA=.html 6T瓮诶茄4稳h泳84http://www.zcool.com.cn/collection/ZMTg0NDc3OTI=.html 948rrL742ahttp://www.zcool.com.cn/collection/ZMTg0NDg1NjQ=.html 6rAuc桨樟6oehttp://www.zcool.com.cn/collection/ZMTg0NDg2NT