图标字体制作

首先打开IconMoon网站,https://icomoon.io/ 点击导航栏右上角的IconMonn App按钮,跳转到图标页面 在这里会看到IconMoon提供的一些免费icon,因为是要自己制作,所以点击左上角 import icons,将要制作的svg文件全选点击上传,如下图 全选按钮,然后点击右下角的Generate Font,进入打包预览界面,点击perferences, 弹出一些设置页面,可以更改icon包名字,以及兼容的浏览器等. 最后更改完,选择download下载 原文地址

本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图 雪碧图实例:淘宝PC端 将多张小图放至一张大图 使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法 使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro

在实践项目中,多多少少都会用到各式各样的图标,作为WEB前端技术人员,又不得不每一次单个单个的切出图标以及重新命名,如果需求又说要将所有图标整合在一张PNG图片里,这样又得耗费很多时间.随着互联网快速的发展,移动端的网站也崛地而起,因此,在浏览移动端的网站时,图标也出现新的问题——“变得模糊了”. 经过度娘的回答,也有了很多解决图标模糊的方法,我这里就不一一例举.本文也只探讨一下其中的一种方法,使用“字体图标”:网上也有很多现成的图标字体下载,那些都只是别人已经做好了的,我们如果要在那些图标里找

1.图标的制作: 原料是需要有标准的svg图标 知乎引导教程:http://www.zhihu.com/question/29054543 实际操作的第三方网站:https://icomoon.io/app/#/select,类似网站还有http://iconfont.cn(隶属阿里,需要注册) 在网站上传svg文件,然后可以下载到打包的其他格式的文字文件及对应的demo; 2.使用 /* 字体声明部分,声明为jdf*/         @font-face {           font-f

工具: Adobe Illustrator CS5 Fontographer 5.1,下载地址 1.打开Fontographer,菜单"File"->"New"新建字体文件,双击第一个带有两个"**"的格子,打开编辑页面.此时为了方便查看,建议通过"Windows"->"Tile vertically"把窗口为横向平铺,如图(右边是编辑页): 图一.Fontographer界面,右侧为字体图形编

Sencha touch从2.2开始,里面用到的图标全部是字体图标(icon font),也就是字体文件里面的字符作为图标来用. 主要特性 字体是矢量的,使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小而不失真,适用于不同分辨率和尺寸的屏幕 自由的修改颜色 添加阴影效果 支持图片图标的其它属性,例如,透明度和旋转等等 可以添加text-stroke和background-clip:text等属性,只要浏览器支持 字体图标的用法 我们来看下sencha to

开题:之前就有所耳闻,最近两天第一次运用到图标字体.刚开始嘛,一脸懵逼的状态.成功运用之后就来记录一下使用过程咯! 1. 打开在线生成工具:https://icomoon.io/app/#/select  2. 导入本地文件或者选择图标库 (1) 如果你本地没有.svg图标,你可以选择在线免费的图标. 选择一个你想要的icons 接着就会出现如下页面: (2) 点击左上角按钮,选择新建一个图集 然后就会出现: 如果你本地有自己下载过的.svg文件,可以直接将文件拖拽到页面上,如下:** 这时候浏

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

iconfont 技术的主要是将图标转化为字体来减少应用体积.如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库. 优点: 减小体积,字体文件比图片要小 图标保真缩放,解决2x/3x乃至将来的nx图问题 方便更改颜色大小,图片复用 缺点: 只适用于纯色icon 使用unicode字符难以理解 需要维护字体库 字体管理 字体管理方式分为两种:在线管理(iconfont.cn)和FontForge工具.   字体库生成 这里推荐两个比较好用的网站iconmoon和iconfo