如何快速生成CSS文件中所有图标的类名与图标对照表？

我不擅长平面设计和CSS，常购买纯HTML/CSS模板搭建小型网站。这类模板往往带有冗余的未使用JS/CSS，或是只用到了开源图标库的子集，导致CSS文件里堆着一堆类似这样的图标类定义：

.icon-email2:before {
    content: "\e662";
}
.icon-heart2:before {
    content: "\e663";
}
.icon-enter:before {
    content: "\e664";
}
.icon-cloud1:before {
    content: "\e665";
}
.icon-book2:before {
    content: "\e666";
}
.icon-star2:before {
    content: "\e667";
}

我想找个简便方法生成「CSS类名/图标」的对照表，方便可视化查看已有和缺失的图标。我能用PHP写解析器生成对应HTML，但想知道JS或CSS层面更简洁高效的实现方案。

一、JS实现方案（高效自动） #

核心思路是直接在浏览器端解析页面中的CSS规则，提取图标类和对应content值，动态生成可视化列表：

代码示例 #

// 获取页面所有样式表
const styleSheets = document.styleSheets;
const iconList = [];

// 遍历筛选图标类规则（默认匹配.icon-开头的:before伪类）
for (let sheet of styleSheets) {
  try {
    for (let rule of sheet.cssRules) {
      if (rule.type === CSSRule.STYLE_RULE && rule.selectorText.includes('.icon-') && rule.selectorText.includes(':before')) {
        // 提取纯类名
        const className = rule.selectorText.replace('.', '').replace(':before', '');
        // 提取content值并转成实际字符
        const content = rule.style.content.replace(/["']/g, '');
        const iconChar = String.fromCodePoint(parseInt(content.slice(2), 16));
        
        iconList.push({ className, iconChar });
      }
    }
  } catch (e) {
    // 跨域样式表会触发权限报错，直接跳过即可
    continue;
  }
}

// 生成可视化网格
const container = document.createElement('div');
container.style.cssText = `
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  padding: 20px;
  margin-top: 20px;
`;

iconList.forEach(item => {
  const card = document.createElement('div');
  card.style.cssText = 'text-align: center; padding: 12px; border: 1px solid #eee; border-radius: 4px;';
  
  const iconEl = document.createElement('span');
  iconEl.className = item.className; // 直接用原类名渲染，确保和页面样式一致
  iconEl.style.cssText = 'font-size: 24px; display: block; margin-bottom: 8px;';
  
  const nameEl = document.createElement('span');
  nameEl.textContent = item.className;
  nameEl.style.cssText = 'font-size: 12px; color: #666;';
  
  card.appendChild(iconEl);
  card.appendChild(nameEl);
  container.appendChild(card);
});

// 把列表追加到页面末尾
document.body.appendChild(container);

优势 #

• 无需提前处理CSS文件，打开模板页面后直接在控制台运行这段代码即可
• 自动识别页面内所有符合规则的图标，适配内联/本地外部样式（跨域样式除外）
• 生成的列表直接用原图标类渲染，样式和页面保持一致

二、CSS辅助方案（极简临时预览） #

如果不想写JS，纯HTML+CSS就能快速生成预览列表，适合已知图标类名的场景：

步骤1：添加HTML结构 #

<div class="icon-preview-grid">
  <div class="icon-item"><span class="icon-email2"></span><span>icon-email2</span></div>
  <div class="icon-item"><span class="icon-heart2"></span><span>icon-heart2</span></div>
  <div class="icon-item"><span class="icon-enter"></span><span>icon-enter</span></div>
  <div class="icon-item"><span class="icon-cloud1"></span><span>icon-cloud1</span></div>
  <div class="icon-item"><span class="icon-book2"></span><span>icon-book2</span></div>
  <div class="icon-item"><span class="icon-star2"></span><span>icon-star2</span></div>
  <!-- 其他图标类依次复制添加 -->
</div>

步骤2：添加排版CSS #

.icon-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  padding: 20px;
}
.icon-item {
  text-align: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.icon-item > span:first-child {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}
.icon-item > span:last-child {
  font-size: 12px;
  color: #666;
}

优势 #

• 零JS，代码简单直接，适合临时快速预览
• 不需要任何工具，复制粘贴到页面里就能用

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