iconfont字体引用错乱的问题解决方案

       首先说一下原理：

       在项目里的icon我们点击编辑后可以看到有两个可编辑的input框分，别是Unicode和Font Class / Symbol，Unicode是iconfont平台自动帮你生成的一个16进制码，Font Class / Symbol是你上传的icon的svg格式文件名， Unicode➕Font Class / Symbol这两个组成一个唯一icon（不管icon的引用方式是什么）。

      我们的icon来源有两种：

      1：直接应用别人的icon（将别人的icon加入购物车再添加至项目，需要注意的是这可能会存在版权问题）；

      2：自己绘制上传icon；

     上传icon到iconfont平台之后文件是在“我的图标- 我上传的icon”里面，编辑icon我们可以发现有三个值Icon Name、Tags、Font Class / Symbol，这里并没有Unicode，只有在添加到具体项目的时候才会生成Unicode。值得注意的是同一个icon从“我上传的icon”直接添加到不同项目，所生成的Unicode是不一样的，在单个项目中所有的icon的Unicode是互斥的是不相同的。

知道这些之后我们来说关于icon冲突不显示问题。

      我们会在实际工作中会有这样的情况，一个项目引用了两个iconfont项目字体库或者再同个项目字体库内，当Unicode或者Font Class / Symbol冲突时，就会出现字体引用错乱的情况。当然我们可以手动修改Unicode或者Font Class / Symbol的值来解决这个问题，但是当我们字体库很庞大的时候我们很难找到那个唯一Unicode且Font Class / Symbol，毕竟iconfont平台没有快速识别Unicode和Font Class / Symbol重复的方式。

      之前有提到icon单个项目中所有的Unicode是互斥的是不相同的，我们对这个原理加以利用。下面是解决方法：

      1：保证icon都是自己上传的，项目里的icon都是从“我的图标- 我上传的icon”添加到项目里的（注意：文件命名的时候需要注意，1要有意义，2最好是英文）；

      2：新建一个空白字体库，用来添加所有icon；即上传icon之后第一步就是添加到这个项目字体库（这样就可以保证所有icon的Unicode是互斥的）；

      3：然后再将不同项目的所需的icon从这个字体库复制过去（1：加入购物车；2：添加到目的项目）；

      以上就是自己摸索出来的关于 iconfont字体引用错乱的问题解决方案，分享出来希望对大家有帮助；