如何用FontAwesome图标高效制作年份象形图（无需手动填充）

当然有更高效的实现方式，不用手动给每个图标加颜色样式，下面提供两种常用方案：

方案一：纯CSS静态实现（适合固定数据） #

利用CSS属性选择器和:nth-child伪类，通过给图标容器添加自定义属性控制填充数量，只需修改属性值就能自动切换填充图标数量。

代码示例 #

.container-icon {
  color: rgb(155,155,155); /* 默认灰色 */
}
/* 匹配data-count属性对应的前N个图标，设置蓝色 */
.container-icon[data-count="1"] i:nth-child(-n+1),
.container-icon[data-count="2"] i:nth-child(-n+2),
.container-icon[data-count="3"] i:nth-child(-n+3),
.container-icon[data-count="4"] i:nth-child(-n+4),
.container-icon[data-count="5"] i:nth-child(-n+5) {
  color: blue;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
</head> 

<body>
  <div class="container">
    <div class="container-header">
      <p>Item Number 1</p>
      <!-- 只需修改data-count的值即可控制填充数量 -->
      <div class="container-icon" data-count="3">
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
      </div>
      <p>Item Number 2</p>
      <div class="container-icon" data-count="2">
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
      </div>
      <p>Item Number 3</p>
      <div class="container-icon" data-count="4">
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
        <i class="fa fa-circle"></i>
      </div>
    </div>
  </div>
</body>

如果需要支持更多数量，只需继续扩展CSS中的data-count规则即可。

方案二：JavaScript动态生成（适合动态数据） #

如果数据是动态获取的（比如从后端接口返回），可以用JS根据数字自动生成对应数量的填充/未填充图标，无需提前写死所有图标。

代码示例 #

.container-icon {
  color: rgb(155,155,155);
}
.container-icon .filled {
  color: blue;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
</head> 

<body>
  <div class="container">
    <div class="container-header" id="itemContainer">
      <!-- 内容由JS动态生成 -->
    </div>
  </div>

  <script>
    // 模拟动态数据：每个项目的名称和年份数量
    const items = [
      { name: "Item Number 1", count: 3 },
      { name: "Item Number 2", count: 2 },
      { name: "Item Number 3", count: 4 }
    ];
    const totalIcons = 5; // 总图标数量
    const container = document.getElementById('itemContainer');

    items.forEach(item => {
      // 创建项目名称元素
      const p = document.createElement('p');
      p.textContent = item.name;
      container.appendChild(p);

      // 创建图标容器
      const iconContainer = document.createElement('div');
      iconContainer.className = 'container-icon';

      // 生成填充的图标
      for (let i = 0; i < item.count; i++) {
        const icon = document.createElement('i');
        icon.className = 'fa fa-circle filled';
        iconContainer.appendChild(icon);
      }

      // 生成未填充的图标
      for (let i = 0; i < totalIcons - item.count; i++) {
        const icon = document.createElement('i');
        icon.className = 'fa fa-circle';
        iconContainer.appendChild(icon);
      }

      container.appendChild(iconContainer);
    });
  </script>
</body>

这种方式只需要修改items数组中的数据，就能自动渲染对应的图标状态，完全不用手动操作DOM元素。

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