用字体制作小图标
2015-11-06 10:32
295 查看
我们在做网站的时候,时常会遇到类似于下面的这种小图标,
我们以前一般都是切图,但有次无意中在网页中看到人家写的并没有使用背景图片,觉得很神奇,遂研究之,学习之,实验之,终于找到 了做这种小图标的方法。在此,非常感谢张鑫旭博客里面的 如何灵活利用免费开源图标字体-IcoMoon篇对我帮助很大,大家也可以移步去看看~
具体地址是:http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/
下面是我自己具体的做法,步骤大致分为复制图标路径-----打开ai,新建文件,粘贴-----将路径填充一个颜色-----保存为.svg格式-----打开网址https://icomoon.io/app/#/select-----上传你刚刚保存的.svg-----输出即可。
以下分步为大家讲究,以
小图标为例:
1-----复制图标路径(选中小图标,复制大家都会吧~~)
2-----打开ai,
,这个工具可以百度下载,新建一个文件,文件的长宽跟你复制的图标的长宽保持一致就可以了。
3-----粘贴你刚刚提制的小图标路径,弹出下面的框,选择第一个就可以了:
得到下面的这个样子:
4-----将这个随便填充一个颜色,得到下图:
5-----重点来了!!!将文件“存储为……”选择“svg”格式,如下图:
后面的都选择默认的即可了。
6-----打开网址:https://icomoon.io/app/#/select,这个网站专门制作小图标的~比我看到的任何一个制作图标的网站都好用~
7-----点击“Import Icons”按钮(如下图),上传你刚刚做好的.svg文件
8-----接下来,神奇的事情出现了。。duang~duang~duang~~新鲜出炉的图标做好了~
9-----使用方法:
选中它,点击网页底部的的按钮
,有个文件包,解压文件,里面有个模板,看它怎么引用的,你就跟着怎么引用就行了~好想说句So Cool~~哈哈~
Ps:小图标的选中,删除,编辑,修改属性对应这四个小按钮
。操作顺序是先选中你要操作的动作对应的图标,再选择图标~
大家还要学会用右侧导航的功能:
具体怎么用,大家可以利用各种翻译工具,翻译过来是啥意思你就能大致明白这个是干嘛的了~简单粗暴,还特实用!
我们以前一般都是切图,但有次无意中在网页中看到人家写的并没有使用背景图片,觉得很神奇,遂研究之,学习之,实验之,终于找到 了做这种小图标的方法。在此,非常感谢张鑫旭博客里面的 如何灵活利用免费开源图标字体-IcoMoon篇对我帮助很大,大家也可以移步去看看~
具体地址是:http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/
下面是我自己具体的做法,步骤大致分为复制图标路径-----打开ai,新建文件,粘贴-----将路径填充一个颜色-----保存为.svg格式-----打开网址https://icomoon.io/app/#/select-----上传你刚刚保存的.svg-----输出即可。
以下分步为大家讲究,以
小图标为例:
1-----复制图标路径(选中小图标,复制大家都会吧~~)
2-----打开ai,
,这个工具可以百度下载,新建一个文件,文件的长宽跟你复制的图标的长宽保持一致就可以了。
3-----粘贴你刚刚提制的小图标路径,弹出下面的框,选择第一个就可以了:
得到下面的这个样子:
4-----将这个随便填充一个颜色,得到下图:
5-----重点来了!!!将文件“存储为……”选择“svg”格式,如下图:
后面的都选择默认的即可了。
6-----打开网址:https://icomoon.io/app/#/select,这个网站专门制作小图标的~比我看到的任何一个制作图标的网站都好用~
7-----点击“Import Icons”按钮(如下图),上传你刚刚做好的.svg文件
8-----接下来,神奇的事情出现了。。duang~duang~duang~~新鲜出炉的图标做好了~
9-----使用方法:
选中它,点击网页底部的的按钮
,有个文件包,解压文件,里面有个模板,看它怎么引用的,你就跟着怎么引用就行了~好想说句So Cool~~哈哈~
Ps:小图标的选中,删除,编辑,修改属性对应这四个小按钮
。操作顺序是先选中你要操作的动作对应的图标,再选择图标~
大家还要学会用右侧导航的功能:
具体怎么用,大家可以利用各种翻译工具,翻译过来是啥意思你就能大致明白这个是干嘛的了~简单粗暴,还特实用!
相关文章推荐
- WCF跨域调用
- RavenDB官网文档翻译系列第二
- 再谈扁平化
- [iOS9][Xcode7]图片base64上传到服务器后,服务器上的图片损坏问题
- Google Apps - Gmail API的通知功能
- sql server2008 复制数据库的表格
- Handle发送消息机制
- javaweb简单实现国际化信息输出(参考)
- mysql忧化参数
- Android内存控制
- JavaSE:JavaSE大纲
- Oracle分页语句
- C#中读取枚举值的描述属性
- 前端基础
- MySQL:MySQL函数大体
- mvc
- 线程终止方式
- 《从零开始学Swift》学习笔记(Day 32)——计算属性
- Layout_weight属性解析
- SQL子句执行顺序和Join的一点总结