1,把psd文件另存为eps文件(ai能打开的格式),前提图标有路径, 2,用ai打开eps文件 3,新建一个空白文件100*100,然后把图标复制进来,等比拉宽至最大化 4,如果图标有蒙版,就点击图标右键“释放剪切蒙版”,然后把蒙版删掉,左键单击黑色幕布,使图标失焦(后来我发现其实不用释放蒙版会比较好,释放的话有的矢量图生成icon的时候,会分成几个部分) 5,按删除键删除黑色幕布,剩下图标的路径 6,点击左边工具栏“颜色”,使路径上色,黑色即可 7,保存svg格式 8,命名为图标形象即可,比…
图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face),后来W3在CSS2中也引入这个方法,但是后来CSS2.1又被删除了,真是遗憾.直到CSS3,又一次引入,这真是个好消息. 详细见:http://www.w3.org/TR/css3-fonts/. 不过经常会被问到,移动端用没问题,PC上IE可以了,我可以负责任的说:当然可以.原因上面说了,@fo…
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量图标库 登录/注册 打开阿里矢量图标库地址:https://www.iconfont.cn/home/index,并使用 github 账号注册/登录 搜集需要的图标 选中菜单的图标库,然后点击页面右侧的红色搜索按钮 如下图是我搜索 地图 出来的图标库列表 在首页搜索你想要的图标(中英文都 ok…
http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.com/p/font-awesome/#icons-new  2015-10-27 http://isux.tencent.com/icon-font.html  图标字体化浅谈(教程) 2015-11-3 https://icomoon.io/app  图标字体生成器 IcoMoon!一个可以通过个…
图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方,就是制作麻烦. 越来越的网站开始运用这个图标字体. 一些地方,我们就不用精灵图片,直接用图标字体. 图标字体的使用 自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步: 1. 先从网上下载字体.     经常使用的两个网站: icomoon.io http://…
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压…
原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78606747 常用的矢量字体图标:阿里巴巴iconfont,FontAwesome:今天介绍如何在wpf中使用阿里巴巴iconfont矢量图标.其他矢量图标也是类似的使用方式. 1.下载矢量图标ttf文件,并包括在项目中 具体如何下载,不详写了.将ttf文件拷贝至项目,并包括在项目中. 下载下来的文…
织梦cms建站现在已经是很普遍的建站方式了,下面小编就分享一个简单的换网站小图标的方法! 一.登录自己网站的后台管理系统.在不修改织梦后台的情况下,默认的url是自己的网站后台dede目录下访问. 二.进入织梦后台管理系统后,点击右侧的模块按钮,在右侧出现的菜单中点击文件管理器然后进入. 三.找到下面favion.ico这个文件(网站小图标文件),点击改名,复制文件名称到粘贴板,然后删除这个文件. 四.把自己桌面上准备好的要当成网站小图标的32*32的图片右键重命名为favion.ico这个文件…
React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 阿里巴巴 矢量图标库 iconfont 一.找字体文件 访问 iconfont 官网 https://www.iconfont.cn 下载对应的图标库 笔者推荐几个本人较喜欢的库: 飞猪官方icon  https://www.iconfont.cn/collections/detail?spm=a…
一.先进官网 我们看到了上面的这些图标,是不是很心动,阿里妈妈就是给力,给马老师点赞,但是问题来了我们怎么去使用呢. 二.点击图标 嘿嘿,上面的操作步骤我就不多说了吧,我相信大家都会做的,接下来我们就来讲讲该如何去使用了,看下面的 三.使用方法 我们先来介绍官网的方法 第一种: Unicode 引用 将下面一段代码拷贝到css里面 注意:这段代码必须引入自己的,不然图标用不了的. 并定义样式 .iconfont { font-family: "iconfont" !important;…