关于字体图标

1、为什么要将SVG图标改为使用icon-font呢？

• 字体图标可以很容易的任意进行缩放
• 可以简单的进行图标颜色的修改，svg图标不同色需要不同的文件，增加文件成本
• 可以简单的给图标添加阴影，svg图标需要对图标进行重新设计，出现一个新的图标文件
• 可以使得图标拥有透明的效果
• 现在的浏览器大部分都支持
• 可以通过css来很看好的实现各种效果
• 可以为图标提供多种形态：hover、blur等效果
• 文件体积更小，加载成本减小
• 可以具有图片图标可以实现的效果（如：旋转等）

---

2、如何实现图标的转化

经过调研，有两个较不错的网站

一： 淘宝的http://iconfont.cn/图标库

使用方法步骤：��

1.进入网址后，点击 进入图标上传页面，可以批量上传

初次进入会提示你进行登录

2. 保存上传的图标后，点击我的项目，新建一个项目，来存放这些需要转化的图标

3. 返回我的图标页面，选中图标（点亮图标的购物车即为选中），点击右上角购物车将图标导入到项目

4. 进入我的项目，找到对应的项目

1

在1处，有三种方式可以选择，在这里我们推荐使用第二种类名模式，点击选中第二种 三种方案的使用方法

2

在2处，可以点击生成在方案二这种情况下生成的css文件链接，link到页面中，来尝试使用

3

在3处，点击复制代码 ，来复制这个图标样式的类名，在使用的时候将公用类名和图标类名放置到图标上

5. 实际应用到包中

1. 下载到本地

2.将拿到的文件放置到我们的样式包当中，我们在应用这个包的时候，直接引用这个样式文件就可以

缺点：

• 经过使用本地已有的svg图片的导入实验，发现会出现有的图标笔触解析不完善
• 导入的svg图片必须标准，若是不对，会导致图标不出现或上传不成功

二：IcoMoon网站https://icomoon.io网站来进行图标的转化

1. 进入网站后，点击‘IcoMoon App’进入上传文件的页面，进行文件上传

上传完成后，进行需要转化的图标的选中

2. 下载生成文件，如下

3. 实际应用到包中

1. 将生成的文件中需要的文件放置到包中，进行引用使用

   除了将生成的文件中的我们需要的style.css文件和fonts文件
   还可以将demo文件引入，这样在实际进行图标的使用的时候可以来这里面查找，实现快速的使用，并且防止重复的导入

2. 有新的图标需要添加的时候，将图标上传，生成文件，只需要两部实现更改

   将需要的fonts文件夹和demo的相关文件复制覆盖原来的
   将新导入的文件对应类名的样式导入到需要引用使用的样式文件中就可以

3. 在进行实际应用的时候，打开html文件，找到自己需要的图标，直接复制相关html代码使用就阔以

4. 缺点：

   • 这只是一个工具，所以并不能把前面上传过的图标记下来，这样在每一次上传的时候，都需要进行所有图标的全部上传，解决方法是将所有svg图标放置到一个文件中，全部选中进行上传，没有添加太多操作成本
   • 因为无法保存，所以无法实现向淘宝的网站的那种协同制作

三 两个网站进行比较

• IcoMoon网站可以更细致的识别svg图的多个笔触，

  淘宝的IconFont的网站出现了多次不显示上传图标、图标笔触解析错误的问题

• IcoMoon网站无法将以前上传过的图标基础，每次都要全部选中上传，但是并没有多增加什么操作成本
  淘宝的IconFont的网站可以实现图标项目保存，并且可以多个账号协同维护一个项目

• IcoMoon网站在使用上面步骤简单，生成的字体图标更细致

  淘宝的IconFont的网站在笔触分解上没有那么细致
  如下：��

  
  

• IcoMoon网站上传错误的svg不会报错，会带颜色渲染

  淘宝的IconFont的网站上传错误的SVG会报错或不显示

• IcoMoon网站为基础组件制作时候的使用的图标转化工具，已有使用经验在前

总结

最后认为使用IcoMoon网站来进行图标的转化，更加有优势一些

4.如果现在项目中使用字体图标，就需要进行原有svg图的转换，那么转换的过程及成本

• 转换的过程会很快：

  经过上面的介绍，使用IcoMoon网站来进行图标的转化可以将自己的SVG图片进行上传，在这个网站上进行转化。

  ==但是==：可能会存在SVG不合法的情况，这种情况就会需要设计来重新给出图标，会花费一定的时间。可以将错误的图标统计出来进行统一修正

• 转换的成本花费不大：

  ==时间成本==：
  通过这个网站进行转化，会自动生成css文件、以来的font文件、demo文件，可以直接拿来使用，使用人员可以直接从demo中找到自己需要的图标使用。就开发和改造上需要的时间不大。

  ==技术成本==：可以将css文件下载到本地，更新到自己的项目中，且文件的体积不会很大，而且可以自己对css进行各项的操作。

  ==使用成本==：所有需要使用字体图标来进行替换的地方，可以自己对图标的大小、颜色、字体等进行进一步的调试控制

5、综合以上

转换为字体图标，转换步骤、使用步骤都是简单易上手的，
不会增加很多开发成本，且会带来许多更佳的体验效果
增上所述：可实施、易实施。