Icomoon多套图标共存时如何解决content id重复显示冲突问题

你的核心思路逻辑上是成立的，但操作成本极高，完全没必要采用，有更简单的无侵入方案可以快速解决问题，不需要依赖原始json配置，也不需要修改任何字体二进制文件。

方案优劣说明 #

• 你最初设想的「修改其中一份CSS的content编码，再同步修改.eot/.svg/.ttf（你提到的tiff是笔误，图标字体格式为ttf）/.woff文件编码映射」的方案逻辑可行，但所有字体文件都是二进制格式，手动修改编码映射需要借助专业字体编辑工具，操作门槛高、极易出现字形丢失、渲染错位的问题，投入产出比极低，不推荐使用。
• 推荐方案：通过隔离字体族+区分图标类前缀的方式解决冲突，全程只需要修改CSS文件和重命名字体资源，10分钟即可完成，完全不会出现编码冲突问题。

推荐方案操作步骤 #

1. 先处理第二套图标库的字体资源：将你自行生成的所有字体文件（.eot/.svg/.ttf/.woff）统一重命名为带2后缀的版本，比如icomoon2.eot、icomoon2.woff，避免和原有第一套的字体文件重名发生静态资源覆盖。
2. 修改第二套icomoon2.css里的@font-face定义：
   • 将font-family的属性值从默认的'icomoon'改为'icomoon2'，和原有字体族做区分
   • 将src里引用的所有字体路径替换为你刚才重命名的带2后缀的字体文件路径
     示例修改后代码：

   @font-face {
     font-family: 'icomoon2';
     src:  url('fonts/icomoon2.eot?u12mab');
     src:  url('fonts/icomoon2.eot?u12mab#iefix') format('embedded-opentype'),
       url('fonts/icomoon2.ttf?u12mab') format('truetype'),
       url('fonts/icomoon2.woff?u12mab') format('woff'),
       url('fonts/icomoon2.svg?u12mab#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: block;
   }
   

3. 修改第二套CSS的通用图标类选择器，把原有匹配icon-前缀的规则改为匹配icon2-前缀，绑定到新的字体族上：

   /* 原规则是[class^="icon-"], [class*=" icon-"] */
   [class^="icon2-"], [class*=" icon2-"] {
     font-family: 'icomoon2' !important;
     /* 其余font-size、speak、font-style等原有属性保持不变即可 */
   }
   

4. 批量替换第二套CSS里的所有图标类名：用编辑器全局替换功能，将所有.icon-开头的选择器替换为.icon2-开头，比如把.icon-close:before替换为.icon2-close:before。

   注意：这一步不需要修改任何content的编码值，因为两套图标已经绑定了完全独立的字体族，哪怕content编码完全相同，浏览器也会根据类绑定的font-family去对应字体文件里找字形，根本不会出现冲突。

5. 页面使用时，原有第一套图标继续用icon-xxx的类名，新增的第二套图标用icon2-xxx的类名即可，所有图标都能正常渲染。

内容的提问来源于stack exchange，提问作者Francesco