大家好，我是灰大设计团队的 灰色执照～

我们将从设计和代码的角度分别介绍阿里巴巴的 Iconfont 这个网站。学习本篇文章后，你会对字体图标有一个比较全面的理解。今后你不会再把Iconfont只当成一个下载图标的地方。

文章的前半部分介绍字体图标的基础知识，Iconfont的详细使用方法。后半部分利用Iconfont制作一套简易并且只有几KB的数字字体。如果你不想学习前半部分，也可以跳到文章的最后，学习一下阿灰自己琢磨出的黑科技。

Iconfont网站的地址是：

https://www.iconfont.cn/

▲ 这就是Iconfont的首页，你可以很方便的搜索别人的图标并且下载或者加到你的项目里。

 首先我们要明确两点基础知识：

1、为什么要用字体图标?

因为它是矢量的，制作好后，程序员很方便可以修改大小、颜色。改变其尺寸不会失真。

2、为什么要用阿里巴巴的Iconfont?

a. 上传Iconfont后，网站能够自动生成字体图标的多种格式。

b. 你能够远程引用字体，图标可以直接放在阿里巴巴的服务器上（或者说Iconfont的服务器上）当然也可以放到本地（自己的服务器上）

c. 可以创建多个项目，多人协作。设计师和程序员各司其职，大家都方便。

d. 可以做一套只有几个字的简易字体，比如只有数字0到9和逗号。方便弄成那种只显示 15,567,385 的特殊效果。（本文最后有这个示例）

字体图标有这么多的优点，那么需要你制作什么格式的图标呢？iconfont需要你上传的是 SVG 格式的图标。AI中可以直接另存为SVG，PS中可以对形状图层右键，导出SVG。Sketch和Figma也很容易导出SVG。

SVG 是一种图像文件格式，它的英文全称为Scalable VectorGraphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由 World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。（摘录自百度百科）

在制作一个字体图标以前，你一定要学习iconfont网站上介绍的这些基础知识，它的介绍已经很全面了：

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=draw

1、最好是在1024*1024的画布上绘制图标。

2、绘制成套图标，最好是参考图标模板辅助线。

▲ 这就是图标模板辅助线，你可以在下面这个地址下载：

https://bambooshadow.oss-cn-hangzhou.aliyuncs.com/%E5%9B%BE%E6%A0%87%E5%88%B6%E4%BD%9C%E6%A8%A1%E7%89%88.ai

需要强调的是：中文平台下载到的chrome浏览器，不允许文字小于12px (Chrome国际版则允许)，所以，哪怕是矢量图标，你其实也不能制作小于12px的字体图标。如果你需要特别小的图标，则可以在SVG图标四周留很大的空白，然后对图标设置font-size: 12px。因为有空白的存在，图标就看起来是10px或者更小了。

3、图标还应该遵循以下规则：

▲ 如果你上传iconfont的图标变成了一团白色或者一团黑色，99.999%是上面提到的问题。

 学习好基础知识后，我们就开始制作一个SVG图标。

第一步：画一个SVG图标，上传网站

如何画图标我们就不教了，绘制好图标以后，你就可以上传到Iconfont网站了。网站通常需要你登录，你可以使用微博账号登录（他支持微博、github等账号登录，设计师通常只有微博账号）

▲ iconfont现在也支持插画了，左侧是上传图标，右侧则是插图。

▲ 你也可以一口气拖拽多个图标进去，我这里拖了三个绘制好的图标。他们都显示在了左侧。右侧的标签知识方便别人搜索的，没有太大的实际作用。图标的颜色其实也没有太大作用，因为程序员会通过 color:#000000; 这样的样式来控制颜色，所以我们直接选择“去除颜色并提交”就可以了。右侧的标签，比如：线性、简约直接忽略，避免浪费你宝贵的时间。

第二步：把图标加入新建的一个项目。

提交好以后，图标就出现在“我上传的icon”里面了。这个里面展示了你上传的所有图标。你现在需要对他们进行分类，把他们弄到单独的项目里面去。（上图我其实只上传3个图标，里面那么多的图标其实是我以前上传的）

把鼠标移动到图标上，点击购物车的那个图标按钮，把他们全部都加入购物车。（网站的右上角会提示你加了多少个）

▲ 点击右侧上角购物车图标后，右侧就出现了一个侧边栏。

▲ 这个侧边栏最主要就是管理你的项目了，第一次进来里面是空的。点击加号，新增一个项目。

▲ 我新加了一个项目，取名叫：test001

▲ 点击确定后，我刚才上传的那三个图标就进入了新创建的项目了。也就是test001项目。左侧会展示你发起的项目，也会展示你参与的项目。

▲ 点击一下红框内的”暂无代码，点此生成“点击以后，就自动生成了通过网络引用图标的地址。使用此地址，你甚至可以不用下载图标到你的本地或者服务器上。（我这里点过了，所以就变成 点此复制代码 了）

现在我们开始使用这些图标，我们先新建一个空白的html页面。

▲ 除了把刚才从iconfont里面复制到你的css里面，还要记得在所有路径前面加上https: 这样，你就能从互联网上直接引用这些图标了。

现在你需要开始引用某一个具体的图标了。你可以点击iconfont上的“复制代码”，也可以手动的输入图标底下的那一串字符。

▲ &#xe8cb 这一串奇怪的东西其实就是16进制unicode编码，你不需要去理解什么东西是16进制unicode。你简单的理解成计算机看到这玩意，它就认为是一个文字。而现在这个文字，其实又是一个图标。（说到底，其实汉字也是就是用钢笔勾画出来的一些形状嘛。现在的图标字体，只是你自己发明创造并且用钢笔工具勾画出来的一种“火星文”）

▲ 复制也好，手动输入也好。其实都是把这串字符放入网页中。这样就能正常显示图标了。（计算机看到  就知道，该显示你刚才定义好的这个文字了。而这个文字，刚好是一个油漆桶的图标）

▲ 预览网页，网页的左上角已经出现了这个图标。

如果需要修改图标的大小、颜色，通过样式，修改字体大小和字体颜色即可。

▲ 把图标修改成40像素，红色。font-size:40px; color:#f00; 这就是程序员修改图标大小和字体的方法了。他们可以通过修改数值，很快速的修改图标的样式。

▲ 这就是修改后的效果了，无需打开任何设计软件，又快又方便。

需要注意的是，我们只能制作单色的图标字体。你没有见过偏旁是红色，另一半又是蓝色的字吧？所以我们并不能把油漆桶变成一种颜色，倒出的那滴水又变成另一种颜色。但是我们字体可以设置线性渐变、雷达渐变。

▲ 通过设置背景渐变色，并且把文字颜色设置成透明，我们可以对字体图标使用常用的CSS渐变。

▲ 这就是设置渐变的效果。通过把文字设置成透明，背景色设置渐变来完成的这一系列骚操作。当然，我们平时普通的文字，也可以使用这个办法。不需要以为要弄一个渐变，就给程序员做一张png图片了。

除了复制一大段字符到html里面，我还可以复制这个文字到html里面，这样也是一个图标。通常我们不知道每个图标对应哪一个字。所以我们需要下载整个图标文件到本地。

▲ 点击下载至本地按钮

▲ 下载解压后，得到了所有字体格式的问题。点开demo_index.html网站。特别说明:如果你还需要支持 IE6-IE9 等老浏览器，你需要点击iconfont顶部“项目设置”按钮，把 EOT 和 TTF 这两个格式勾选上。

▲ 点开demo_index.html页面，这些图标就和你平时看到的文字一样，可以选中，并且复制、粘贴了。

▲ 因为你的网页编辑器使用的字体不存在这个字，所以他显示了一个未知字符，也就是长方形框框里面一个问号。不过并没有关系，一旦到了浏览器中，他就可以正常显示了。（其实就是你用了一个不常见的Unicode，这好比是我打出了这些玩意：✣ ✤ ✥  ↯ ↰ ↱ ↲ ↳ ↴  ⅟ ↉ ∟ ₥ ₫ ₦ z 他们只是不常见，不常用，他们不代表他们不存在）

▲ 复制这个怪异的问号后，预览网页，图标可以正常显示。通过f12查看，我的<div />标签里面的确是一个字符。

现在你已经学会了如何使用一个不知道是什么文字的字体来当做图标了。这样的招数，你也可以用在你的设计软里面。比如：你自己设置一套字体图标，然后下载字体包到本地，解压后安装ttf或者其他格式的字体文件。再通过这种复杂粘贴的方式，可以在ps / ai / sketch / figma里面打出一个个图标字体了。（明明在ps里面是打字，但是出现的是图标）

除了使用 &#xe8cb; 或者使用他的的那个具体文字，你还有一种方法使用字体图标，就是把他弄成一个CSS伪类，这也是一个常见的做法。

▲ 这就是弄成伪类的样子，原来的&#xe8cb; 修改成了 \e8cb

前面的 &#x 和后面的 分号 都需要去掉。

▲ 预览网页，图标正常显示。这个::after就是这个图标了。

弄成伪类是一种常见的做法，之所以深受大家喜爱可能有2个原因：

1、样式的名称方便区分是哪个图标。

2、方便做出前面是一个图标，后面跟着汉字的那种按钮（比如“删除”前面带着一个“垃圾桶”）

▲ 至于喜欢用伪类真正的原因我并不清楚，反正最早起的框架bootstrap就喜欢这么玩。那玩意一出来就很火了，大家都喜欢跟风学着做。后期很多框架啥的都是站在巨人的肩膀上不断的更新和优化（好的东西，当然要继承好发扬）

▲ 改改css名称，就很容易搞出不同的图标了。

接下来就该考虑协作了。更准确的说，是交付。

图标的管理和交付，你应该把你们组的程序员都拉进这个项目里面，从此以后，关于图标的东西，都让他到这里来下载。你再也不需要考虑新增一个图标或者更新一个图标还要通过微信或者钉钉发送给你的前端小哥了。

当然，如果你们家前端是漂亮的小姐姐，我建议你不要把下面的招数教给他。你们继续用微信沟通，遇到问题了，你最好搬个小凳子做到她边上，你们一起手把手的解决问题（哦，对了，要记得夸小姐姐的手或者指甲漂亮~）

▲ 点击右侧成员后面的头像，就可以添加新的成员了。

程序员一般都有github账号，如果没有，就让对方注册一个微博账号，登录iconfont后，在添加里面输入他昵称的全称。输入以后就可以把他加入项目了。

▲ 还可以给成员设置权限，比如让前端小哥设置成“只读成员”，他只能查看和下载图标（毕竟他也不需要自己修改）

特别需要注意的是：项目中程序员小哥已经写好了代码，这个时候，你想改某个图标，不要上传一个新的。而是应该点击编辑图标按钮。

▲ 修改图标，一定不要重新上传，一定要点编辑。

▲ 点击编辑图标后，然后点上图红框内的“上传替换icon”按钮。换成一个新的即可。

为什么要这么做呢？其目的是：程序员小哥代码里面已经用到了&#xe8cb;这个16进制的Unicode，你修改图标后，不会修改unicode。前端小哥不需要再次改代码了。

以上就是我了解的iconfont的所有知识了。不过我们的教程没有结束，接下来我将教大家一套骚操作：《制作一套只有数字的字体》

步骤1，绘制一套数字图标，比如0-9（通常你还需要逗号）把他们都上传到

▲ 比如你喜欢某套中文字体中的数字部分，想干掉其余多余的所有汉字，从而达到缩小字体文件尺寸的目的。你可以打出他的他的数字，转选区，再转形状。（实在不会你照着描一遍路径）

步骤2，对每个图标点击编辑。将底部的字符改成对应的。比如0就改成0。1就改成1。所有的图标都一一对应起来。

▲ 我现在绘制的是0，所以把底部的字符修改成0。依次类推~

步骤3，修改好以后，你可以检查一下Unicode，基本上1就是&#x319就是&#x39 看看自己有没有疏漏。

▲ 一共没几个字，耐心细致的检查一遍，养成好习惯。

步骤4，现在字符都对应上了，在html中，输入数字1，就得到图标1了。

▲ 我输入了0123456789

预览效果，完全没有问题

▲ 牛逼啊，一套数字字体就做好了。记得做个千位分隔符，也就是逗号。方便你展示这样的格式：26,805,145

学会了这套骚操作，你可以很方便的精简字体了！例如我们常见的这种东西，程序员可以用代码很方便的控制它。

▲ 郑重说明：这些骚操作都是我自己平时工作中研究出来的，没有参考过任何文章。全网独一份，100%的纯干货毫无保留的教给你~

好了，今天的教程就到这里了，希望我教的东西对你有帮助。我是灰色执照，我们下期见~

如果你想用现成的图标，我收集了一大堆牛逼人制作的开源图标，https://www.pslkzs.com/course/course.php

Powered by Froala Editor