1，把psd文件另存为eps文件（ai能打开的格式），前提图标有路径,

2，用ai打开eps文件

3，新建一个空白文件100*100，然后把图标复制进来，等比拉宽至最大化

4，如果图标有蒙版，就点击图标右键“释放剪切蒙版”，然后把蒙版删掉，左键单击黑色幕布，使图标失焦（后来我发现其实不用释放蒙版会比较好，释放的话有的矢量图生成icon的时候，会分成几个部分）

5，按删除键删除黑色幕布，剩下图标的路径

6，点击左边工具栏“颜色”，使路径上色，黑色即可

7，保存svg格式

8，命名为图标形象即可，比如书本为book，有重复的就写book2

9，用以下网址制作iconfont

https://icomoon.io/app/#/select

用网站把图标做成iconFont文件引用的更多相关文章

  1. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  2. 字体图标库 iconfont、iconmoon 的维护管理与使用探索

    字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...

  3. !!字体图标（iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等）。 图片压缩

    http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...

  4. CSS高级技巧 图标字体ICONFONT的使用方法视频

    图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方 ...

  5. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  6. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  7. 如何更换织梦cms系统的网站小图标

    织梦cms建站现在已经是很普遍的建站方式了,下面小编就分享一个简单的换网站小图标的方法! 一.登录自己网站的后台管理系统.在不修改织梦后台的情况下,默认的url是自己的网站后台dede目录下访问. 二 ...

  8. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  9. 阿里妈妈的iconfont的引用问题

    一.先进官网 我们看到了上面的这些图标,是不是很心动,阿里妈妈就是给力,给马老师点赞,但是问题来了我们怎么去使用呢. 二.点击图标 嘿嘿,上面的操作步骤我就不多说了吧,我相信大家都会做的,接下来我们就 ...

随机推荐

  1. STATA一小步 我的一大步

    第一次用STATA,以前一直搞SPSS,简直是生产力革命啊. 记下写的第一个命令 也是实现了一个probit回归 clear cd C:\Users\Qian\Desktop\1 insheet us ...

  2. C/S与B/S的区别

    C/S与B/S的区别 1.区别 1.B/S架构是针对C/S架构缺点进行改进后提出的网络结构模式. B/S结构属于C/S结构,是一种特殊的C/S,因为浏览器只是特殊的客户端. 2.C/S可以使用任何通信 ...

  3. Swiper.js使用及API介绍

    Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html

  4. 浮点型的三个特殊值 Double.NEGATIVE_INFINITY Double.POSITIVE_INFINITY Double.NaN

    Double.NEGATIVE_INFINITY 负无穷 Double.POSITIVE_INFINITY 正无穷 Double.NaN 非数 注意:浮点数才有无穷的概念,整数是没有的 比如: int ...

  5. Sonya and Robots（CodeForces 1004C）

    Since Sonya is interested in robotics too, she decided to construct robots that will read and recogn ...

  6. Python基础综合练习

    from turtle import * def draw(x): begin_fill() for i in range(5): forward(x) right(144) end_fill() d ...

  7. python全栈开发笔记----基本数据类型---列表方法

    #list 类中提供的方法 #参数 1.def append(self, *args, **kwargs)原来值最后追加#对象..方法(..) #li对象调用append方法 li = [11,22, ...

  8. apache 与 php-fpm 几种处理方式

    目录 1.SetHandler 2.ProxyPassMatch 3.ProxyPass 1.SetHandler 在apache配置文件只部署一次 需要Apache 2.4.9以上才行 ip:por ...

  9. mybaties逆向工程教程工具

    http://www.cnblogs.com/wangkeai/p/6934683.html

  10. centos 安装桌面系统

    yum -y groupinstall "Desktop" "Desktop Platform" "X Window System" &qu ...