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. 学习：MQTT协议及原理

    1 MQTT协议实现方式: 实现MQTT协议需要客户端和服务器端通讯完成,在通讯过程中,MQTT协议中有三种身份:发布者(Publish).代理(Broker)(服务器).订阅者(Subscribe) ...

  2. LeetCode（3）：无重复字符的最长子串

    Medium! 题目描述: 给定一个字符串,找出不含有重复字符的 最长子串 的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ...

  3. vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.v ...

  4. 【Cocos2d-html5】运动中速度效果

    在我们使用Action系统动作的时候,比如MoveTo,在进行运动的时候总是在规定的时间内进行匀速运动,有时候可能会想添加一些加速度的效果,cocos2d-html5就依然和cocos2dx一样为我们 ...

  5. ubuntu1604使用之旅——安装samba

    1.安装samba sudo apt-get install samba 2.安装sambaclient sudo apt-get install smbclient 3.修改配置文件 sudo vi ...

  6. 18-10-09 Linux常用命令大全（非常全！！！）

     Linux常用命令大全(非常全!!!)   Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制, ...

  7. java学习笔记38（sql注入攻击及解决方法）

    上一篇我们写了jdbc工具类:JDBCUtils ,在这里我们使用该工具类来连接数据库, 在之前我们使用 Statement接口下的executeQuery(sql)方法来执行搜索语句,但是这个接口并 ...

  8. SpringBoot（五）Springmvc+Mybatis+mysql

    为了整合这个花了,好长时间,因为上几个连在一起,在pom文件中有没注释的配置,导致我找这个问题找了好久.下面开始 1,先new project 时选择spring initializr,新建好一个空项 ...

  9. swift3.0自定义相机界面

    这是公司上上上一个项目的自定义相机界面,原来是swift2.0写的,今天改为swift3.0,记录一下. 效果图如下:                                         ...

  10. Arcmap查找孤路

    本文将介绍如何查出孤路——如下图红色框中的路: 方法一:使用拓扑检查 1. 使用merge,将所有道路合并到一个图层.注意,不能先分图层进行拓扑检查,因为本不是孤路的数据可能会被挑出来. 2. 对合并 ...