还在为小图标不能适应各种设备发愁吗?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.cn这个平台。积累了些东西,记录下。 1.什么是iconfont? iconfont不是什么新技术了。 我们知道web网页能使用的字体一直很少,很多时候设计师用ps

原文: http://purplebamboo.github.io/2014/01/09/iconfont/ 1.什么是iconfont? iconfont不是什么新技术了。 我们知道web...
  • jyb123
  • jyb123
  • 2016年04月18日 15:06
  • 2365

字体抗锯齿属性-webkit-font-smoothing

字体抗锯齿属性:-webkit-font-smoothing,有需要的朋友可以参考下。 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。 ...
  • u014516981
  • u014516981
  • 2016年09月22日 23:26
  • 4921

加载gif动画图片

1、studio添加fresco的jar包依赖使用括号里面的就行(compil 'com.facebook.fresco:fresco:0.8.1')       加载gif不要用高版本的Fres...
  • houxiaohui0078
  • houxiaohui0078
  • 2016年10月20日 20:28
  • 470

loading等待载入正在加载的动画GIF图片圆形图标

loading等待载入正在加载的动画GIF图片圆形图标
  • love_xiolan
  • love_xiolan
  • 2016年08月31日 11:36
  • 8755

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

我看到我们网站的图标还用的图标来做的时候,我感叹了下,失真严重啊,gif动画图标锯齿那个严重啊,看不下去了,我给大家分享下我已经用了很久的一种技巧,现在移动设备,微信公众号,包括很多网站都已经用上了字...
  • alongken2005
  • alongken2005
  • 2016年03月30日 15:38
  • 1179

Chrome字体抗锯齿与图标字体显示异常处理

PrefaceGoogle Chrome在Linux平台上的字体使用的是自己设定的,而不喜欢用微软雅黑,但是会导致很多CSS字体无法正常显示。Stylish下载这个插件,这个插件里增加以下CSS代码*...
  • qq_20336817
  • qq_20336817
  • 2016年10月17日 15:38
  • 695

你还在为英语学习发愁吗?

你还在为英语学习发愁吗?       我常常痛恨自己成长的慢,痛恨自己很多的东西知道的太晚,痛恨自己领悟能力不 好,,,我常常阅读,阅读是我什么中的一部分,我今天将分享我一个好同学:刘文彬 的成长...
  • u013067756
  • u013067756
  • 2015年03月19日 09:50
  • 2283

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

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

Android应用开发之PNG、IconFont、SVG图标资源优化详解

在我们App开发中大家可能都会有过如下痛疾(程序员和设计妹妹注意喽):好多小的图标好烦人,又占体积还要考虑分辨率,一拉伸就模糊等。同一个图标不同状态还有不同颜色的多张。总是幻想IOS、Android、...
  • yanbober
  • yanbober
  • 2015年12月27日 12:03
  • 12768

超实用的高清图标SVG解决方案全总结(下)

在上一篇文章中,我们讲述了字体渲染机制和导致iconfont出现锯齿的原因,以及如何才能出绘制高质量SVG ICON,并且提供了一套AI模版供大家参考使用。下文将讲诉前端侧我们如何用SVG来做成高清I...
  • qq_36648555
  • qq_36648555
  • 2017年11月04日 00:00
  • 263
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:还在为小图标不能适应各种设备发愁吗?iconfont为你解决所有问题
举报原因:
原因补充:

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