还在为小图标不能适应各种设备发愁吗?iconfont为你解决所有问题

原创 2016年03月30日 15:38:55
我看到我们网站的图标还用的图标来做的时候,我感叹了下,失真严重啊,gif动画图标锯齿那个严重啊,看不下去了,我给大家分享下我已经用了很久的一种技巧,现在移动设备,微信公众号,包括很多网站都已经用上了字体图标的方式来显示小图标了(iconfont),和文字一样,不会有失真,而且配合css3的动画基本能替代很多的gif动画。还有个好处就是字体文件比图片小很多,还提供不同的很多字体格式,只要不是太落后的浏览器都没问题

  


下面给大家介绍下怎么制作图标字体,阿里旗下的这个网站有非常丰富的图标资源:http://www.iconfont.cn 
1、从http://www.iconfont.cn 找到你想要的图标,以svg格式下载到本地,想要多少下载多少
2、https://icomoon.io/app/#/select 打开这个网站我们就可以制作自己的图标字体了,点击import icons 按钮,把下载的svg格式图标导入进来,然后你就能在线看到你导入的图标,宾且可以进行在线编辑,编辑功能非常强大,完全够用
3、导入编辑好后,选中你想要的图标,点击右下角的生成字体按钮,会自动生成好字体,下载后,压缩包里包含了css样式,直接用就是了,非常方便



相关文章推荐

iconfont在线链接使用方法

基础流程就不多赘述,直接到http://www.iconfont.cn/官网看,下面主要介绍在线链接使用: 1. 生成项目,选中右边的Font Class, 2.复制链接;  //at.alicdn...

SOUI中自定义窗口不能适应图片大小问题解决

接触SOUI有段时间了,一直觉得SOUI中xml配置界面很方面,比如要根据图片大小来居中一个按钮,在xml中只需要写  其中skin_customer_pic就是自己想显示的那张图片。    这次我用...

iconfont web开发小图标

  • 2017年10月30日 12:06
  • 254KB
  • 下载

你还在为浏览器兼容性问题苦恼吗

一、图片下方有间隙,解决方法如下 a)     将图片变为块元素 b)    将父元素的字体大小设置为0 二、图片间有间隙,解决方法如下 a)     将代码写在同一行 b)    将父元素...

还在为右键没有svn菜单发愁?简单几步给你变出来

右键没有SVN菜单?简单几步把菜单给你变出来1、按住Ctrl + Shift + Esc , 选到“进程”栏; 2、找到explorer.exe,结束它; 3、点击左上角的“文件”,选新建任务...

还在为画“类Word文档报表”而发愁吗?

葡萄城报表可以很好的解决类Word文档类的报表创建,可快速创建复杂的图文混排样式,而且能够实时的进行数据更新。...

亲,还在为传输文件发愁吗?

亲,你还在为不会传输文件发愁吗?别担心了,跟着我,没问题。 现在我们有两个人小红和小蓝,小蓝现在想要小红的westos{1..5}这5个文件,她有两种方法:1.让小红将文件发送给她;2.她直接从小红的...
  • sr_1114
  • sr_1114
  • 2017年10月23日 20:31
  • 28

你还在为寻求高薪而发愁吗?

你还在为寻求高薪而发愁吗? 你甘心蜗居10平米的出租房吗? 你甘愿做熬夜加班的程序猿屌丝吗? NO NO NO!我要高薪,我要洋房,我要跟屌丝Say Goodbye! 你羡慕别人朝九晚五、节假...
  • zhuwIT
  • zhuwIT
  • 2015年01月21日 22:52
  • 11

还在为工作发愁?学JavaScript吧

事实上,每家专业招聘机构,从Glassdoor.com和Linkedin到美国劳工部,都报导了就业市场对开发人员需求的增长速度出于意料地快。这种需求可能已经不新鲜了,但是就业市场对哪种开发语言的需求量...

移动互联网来了,很多创业的小伙伴们,你们还在为用户的访问慢的问题头疼吗?----腾讯NoSQL高速存储(又名CMEM)介绍

移动互联网来了,很多创业的小伙伴们,你们还在为用户的访问慢的问题头疼吗?延时的大小意外着用户玩你的游戏爽不爽,尤其是手机端,延时体验是第一竞争力。CMEM是腾讯云平台提供的一款专注于解决性能、延时、运...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:还在为小图标不能适应各种设备发愁吗?iconfont为你解决所有问题
举报原因:
原因补充:

(最多只允许输入30个字)