Icon-font图标字体的四类制作方法 - 简书
Icon-font图标字体的四类制作方法
FontAwesome经历了两年的进化，如今已成为不少工具性应用开发者的首选。但FontAwesome的图标毕竟有限，在某些特定的情景中，FontAwesome的字体并不能准确地传达合适的意义。为自己的Web App定制icon-font字体在某些时候就变成了一种需要。因为想为公司的产品定制一套icon-font，把曾经那些不易改变不易调校大小颜色的图片改成图标字体，经过搜索和试用，发现icon-font大致有四类制作方法。这四类方法的图标生成原理是一样的，主要步骤：步骤一：使用矢量图形编辑器设计图标，画布最好设为512px*512px。以Adobe Illustrator为例，保存为svg格式时会弹出一个svg图片属性设置对话框。这时候请按下图设置选项,
上图来自Filament Group
步骤二：将svg图标文件导入Glyph字型排版工具编辑调校，生成icon-font字体文件步骤三：制作与字型编码匹配的CSS文件供网页调用以下介绍的四大类型的icon-font制作方法的最大分别在于第二和第三步，也就是使用什么工具编辑和生成字体的不同，及是否自动生成CSS文件的区别。本文会忽略第三步CSS文件的制作的过程，重点介绍第二步的差别和心得。1. 速成系 ：一步到位在线icon-font生成器，比如或 + 自制CSS文件
icomoon的icon-font生成器界面
IcoMoon和Fontello都支持直接拖拽svg格式的图标到网页上传图标，即时在线预览不同字号的图标字体效果，批量编辑图标的CSS class名称和Unicode编码，以及下载为全套web字体及CSS文件，可谓相当方便。倘若下载之后发现其中某个图标的名称或编码需要修改，而icon-font生成器已经被关闭，如果你需要编辑的图标不超过10个，那么恭喜你，你依然有机会在几分钟内完成图标字体的生成。但是如果需要修改的图标太多，那么这种免费的在线编辑器恐怕会成为你的噩梦。由此可见，免费的在线图标编辑器只适合小批量快速的图标编辑，图标的质量取决于你在svg文件设计时的质量。当然，如果你想使用在线的icon-font生成器服务于大型的图标字体项目也不是不可以。icomoon就推出了Premium付费服务，你只需注册并按使用期限付费，就可以在线保存icon-font编辑项目了。速成系方法适合不擅长设计，想要快速获得定制图标库的开发者。2. 尊贵系：专业级的体验 (Mac)矢量图形编辑软件（Adobe Illustrator）+Glyphs/Glyphs Mini/FontLab + FontSquirrel WebFont Generator+ 自制CSS文件尊贵系，顾名思义，需要花费不少银子才可以获得正版使用权。其中的Adobe Illustrator不用多说，是矢量图形设计利器。自Adobe推出CC按月付费以来，设计师对于Adobe软件的支出便成了无底洞。虽然Affinity Designer, Sketch等众多支持矢量图形编辑的软件纷纷推出满足一次性付费的图形编辑器市场的需求。但是毕竟这些新应用或多或少还有一些Bug，稳定性短时间内难及Illustrator。当然，如果你对其他矢量图形编辑软件有信心，在这一步把Adobe Illustrator替换成其他你心仪的图标编辑软件，甚至直接使用接下来介绍的Glyphs制作亦可。
是一套专业级的字形编辑器，完整版的价格约人民币2000元，支持直接在Glyphs里创建矢量字形。Glyphs Mini相比Glyphs主要保留了SVG导入，字体命名及字体文件导出的功能，价格约为完整版的十分之一。全套价格不菲，如果你已是Illustrator的重度使用者，建议配合Glyphs使用。可视化的节目适合专业的字体设计师，及不愁经费的个人及团队。相比接下来要介绍的开源系，Glyphs相信在字体编辑导出的效率上会大大提高。
FontLab TransType可用于转换字体，导出不同格式的字体文件
公司出品的一系列字体编辑转换工具与Glyphs类似，FontLab Studio也是专业级的，支持Mac和Windows平台。因为没有使用过，这里就不赘述。使用Glyphs导出icon字体文件后，可以使用Font Squirrel网站提供的上传由Glyphs导出的.ttf格式字体，然后选择默认的Optimal选项，最后“Download Your Kit”，生成器就会默认生成包括.eot, .svg, .ttf, .woff, stylesheet.css及Demo页面的文件。不过icon-font字体有时无法正常在它生成的Demo页面正常预览到。这个Font Squirrel的字体生成器会更加适合英文字体的生成和排版效果预览。
FOnt Squirrel Web Generator截图
如果你想高度定制导出的WebFont Kit的文件类型，可以选择Expert进行更多设置
2. 开源系：尊贵系能做到的，我也可以，只是...（Windows/Linux/Mac）InkScape + FontForge + FontSquirrel WebFont Generator不同于尊贵系，这一系的软件全部是开源的，支持全平台。是一款开源的矢量图形编辑工具，点击菜单栏Text & Glyph即可进入字型编辑面板。不同于Illustrator只能浏览自行，InkScape的Glyph还可以将当前选中的图层添加到为新的Glyph。不过过程稍稍麻烦，这就是开源软件的不便之处。毕竟缺少组织性的综合产品设计规划与开发，InkScape看似功能俱全，但界面图标设计和易用性欠佳。是一款开源的字体编辑工具，在windows和Linux上上有GUI版本，在Mac上可以通过命令行安装。虽然功能上几乎接近专业级的收费软件Glyph，可以导入svg文件，编辑字体信息，调整字型样式，但是在体验上真的谈不上方便，不少操作有些繁杂，有一些明显的Bug。但它毕竟是开源的软件，并且在2014年中重新开始了开发与更新。4. 竹林系：搞定命令行如有轻功（Mac/Linux）矢量图形编辑软件（Adobe Illustrator）+FontCustom命令行
Font Custom网站截图
我尝试用过两次，第一次是在几个月前，搜索icon-font制作指南时发现了放在Github上的开源项目，但那是因为不是很明白这类基于RubyGems的工具的安装运行原理，所以没有安装成功。第二次尝试是在今天，因为重装过Yosemite的Mac系统，于是从零开始跟着安装指南安装了RubyGems，Brewhome，FontForge。据说只要运行一句命令行，程序会自动把存有svg源文件的图标自动生成为webfonts，同时会生成css文件和HTML预览文件。现有的一个icon-font库Ionicons的目录结构及Cheatsheet预览页面的样式就同FontCustom非常相似。他们都是基于Python的程序自动生成的。用户可以自己在yml文件中设定模板生成参数，支持直接生成到指定路径的文件夹，或是生成scss版本等。如果掌握了FontCustom命令行生成icon-font的方法，则无需依赖在线的icon-font生成器，可以在本地意见生成icon字体和全套的页面文件。这就使得图标的修改更新和预览非常方便，也非常方便团队协作。但没有什么是完美的。FontCustom虽然长远看来十分方便，但是如果没有命令行使用经验，要自己安装和上手是有些复杂的。另外在安装fontCustom时用到了一个listen的package，安装时提示2.8.4的版本503错误，最后是手动安装了listen的2.8.3的版本，才得以继续FontCustom的安装。另外fontCustom在生成文件的模板设定上还需要下一番功夫，才能让生成的文件版本、名称和结构称心如意。小结以上四大类的icon-font生成方法适用于不同的项目和人群，欢迎自行挑选。尊贵系的部分软件因为没有亲自购买体验，描述全靠印象。个人目前使用icon-font的项目属于长期需要优化修改且需要团队协作的大型web应用，所以个人选择使用第四种方案，也就是FontCustom。至于icon-font制作的第一步，也就是SVG icon设计的部分其实也是一个很有学问的步骤，尤其当icon要面对不同字体的挑战时，尤其是14px以下的字体时，有可能显示不清或是有锯齿，这就需要在图形构思方面下更多功夫。今年最让我喜欢的icon-font库不是FontAwesome，而是Drift公司为旗下ionicFramework配套设计的icon-font 。今天的icon-font图标研究少不了对Ionicons 2.0的文件结构的研究。从样式上看，Ionicons或许也使用了FontCustom生成字体，不过他们高度定制了Python Script，实现了更加进阶的诸如CheatSheet生成的功能。最后，icon-font只是用于网站图片展示的方法之一，不见得适用于所有项目，尤其是基于Marketing的小型项目，有时直接使用svg或png图片效率更高。欢迎有兴趣的朋友参与讨论。参考资料
生活需要小屁孩的眼睛，大姐姐的心灵和工程师的罗技，用好奇心敲出最温润的美丽。
慕课网 用字体在网页中画ICON图标 学习笔记 一、用 CSS Sprite 实现 icon 图标 CSS Sprite也称为 ”CSS雪碧“ 或 ”CSS精灵“。它是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置，因此也叫 ”图片拼...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
译自:Delivering Octicons with SVG 译者：张万程[译]Github是如何使用SVG制作图标的 GitHub.com不再通过图标字体实现图标集。取而代之，我们已经在所有代码库中用SVG替换Octicons。这个变化主要发生在底层，你会立刻感受到SV...
之前发表过一篇关于iconfont图标字体的相关教程，以文字的方式，实现网页中的图标和特殊字符。教程链接可参考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950 iconfont官网：http://www.icon...
公司现在已有一整套的Icon，那我们应该如何绘制一个Icon，让其风格与之前的保持统一呢。 | 在设计icon时，按标准化规范设计 icon设计的标准化规范是图标栅格化矢量设计，像素满格，轮廓精确对齐1px网格，而不是0.1~0.9px，减少线条发虚。 删格模板（白色画板大...
如火如荼的5.20,5.21过去了，风雨雷鸣的5.22也过去了，忽明忽暗的光线总让人思绪翩翩。今年的520,999朵的红玫瑰，20斤的五花肉，520的大红包，都没让我体味到爱的味道，唯独朋友的随手的一句短诗。着实虐了我一把： “何为伴侣？” “柴米，油盐，半亩地” “可否具...
无人洗车机你听说过吗？实际上，无人洗车机、自动洗车机等词早在前几年就已经进入了人们的视野。随着传统洗车方式的弊端逐渐显露，人们对于洗车的质量、效率等要求不断提高，这使无人洗车机在近几年中迎来巨大的发展机遇，云洗科技（广州）有限公司乘势而上，推出云洗速8快洗项目。 云洗速8快...
一般页面引用js，如果放在头部即&head&&/head&中时，意味着js会在页面加载前就读取，就有可能会出现获取不到对象的问题 重现问题： 一般页面引用js，如果放在头部即 中时，意味着js会在页面加载前就读取，就有可能会出现获取不到对象的问题： 为了解决这个问题我们可以...
人为什么为成为这个世界的主宰，为什么不是数量比人多的老鼠？为什么不是体积比人大的大象？又为什么不是可以自由飞翔的小鸟？这似乎不是个问题，答案显而易见。但是，我们的确很少认真去思考，究竟是什么选择了人类，让他们成为历史和文明的创造者。 《未来简史》的作者赫拉利认为，弄清楚智人...photoshop怎么制作ico图标?
互联网 & 12-06 11:34:22 & 作者：lj &
photoshop怎么制作ico图标？想给自己的硬盘制作一个漂亮的图标，该怎么设置呢？下面我们就来看看ps制作ico图标的教程，很简单，需要的朋友可以参考下
目前，使用电脑的童鞋，都希望把自己的系统搞得靓靓的，今天就为大家讲解一下，如何使用PS打造漂亮硬盘ICO图标的方法。
软件名称：Adobe Photoshop 8.0 中文完整绿色破解版软件大小：150.1MB更新时间：
软件名称：ico for Photoshop(让你的PS打开ICO图标) v1.0 免费绿色版 32+64位软件大小：126KB更新时间：
1、将从网上下载的图片置入PS中，进行抠图处理。
注：背景色单一的，直接使用魔术橡皮擦工具，也可参考其他经验。
2、按Ctrl键，鼠标点击图层建立选区--复制。之后按Ctrl+N，新建256 x 256 像素，透明背景画布。
注：像素宽，高数值必须在256以内，否则无法保存为ICO文件。
3、确定后，按Ctrl+V，将复制的图像粘贴进去；按Ctrl+T进行缩放/变换，并使图像居中。
4、调整OK后，点击文件--存储为（A）...，在弹出的页面中，设置保存位置，选择格式为：ICO （windows Icon）*.ico --保存。
5、在弹出的ICO对话框中，选择下面的PNG选项，并点击OK。这时，就会在保存位置出现刚刚的ICO文件。
6、为了便于演示，我们使用U盘进行操作；
（1）将ICO文件复制到U盘中；
（2）新建一个文本文件，将文件名及扩展名改为：Autorun.inf
内容为：【autorun】
icon=XX.ico & 注：XX为文件名。
7、之后，将U盘安全退出，再插到电脑上，打开我的电脑，即可看到U盘图标。
注：硬盘中使用方法一样，只是需要重启电脑。
注意事项：
自己也可以到ICO网站上制作，但效果欠佳。
相关推荐：
大家感兴趣的内容
12345678910
最近更新的内容还在为绘制icon发愁吗？ 还在提心吊胆的拿别人的psd直接用吗？你想学会设计制作具有自己风格的icon吗？ 那就请耐心读完吧！
可以记录推荐数据哦！
收录收藏夹
系统icon制作教程
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友
下次自动登录
没收到验证码?
下次自动登录
第三方帐号登录
微信二维码登录icon图标文件可以用什么软件制作出来？_百度知道
icon图标文件可以用什么软件制作出来？
我有更好的答案
一般都是把图片通过格式转换，转成ico图标文件的，比如使用格式工厂来转换格式，方法如下：下载安装一个格式工厂软件在电脑上；打开格式工厂，点击”图片“，在图片下点击”ICO“；打开界面后，点击”添加文件“，选择电脑上特定的图片，点击”打开“；图片添加进去后，点击右上角的”确定“；接着再在界面上方点击”开始“的按钮；转换完成后，右击图片，选择”打开输出文件夹“，即可找到转换好格式的ico图标文件了。
图标制作软件很多，比如IconWorkshop或者IconCoolEditor等等，这些软件都有汉化绿色版本。
本回答被提问者采纳
通常都是用图形图像工具画好 然后转格式
PNG转ICO可以借助诸如IconWorkshop等ICO图标处理软件
为您推荐：
其他类似问题
您可能关注的内容
图标文件的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。