如何在CSS content中插入Font Awesome双色调图标？

要实现双色调图标，不能靠重复content值，Font Awesome的双色调图标有专门的字体规则，按以下步骤调整代码：

1. 指定双色调专属字体家族：把font-family改成"Font Awesome 6 Duotone"，这是双色调图标的专用字体，不是普通的Pro字体。
2. 设置正确的字体权重：双色调图标的font-weight必须设为900，这是固定要求。
3. 用CSS变量控制双色调颜色：通过--fa-secondary-color设置次要颜色，--fa-secondary-opacity控制次要颜色的透明度，主色调直接用color属性。

调整后的完整代码：

input[type="date"]:after {
  font-family: "Font Awesome 6 Duotone";
  font-weight: 900; 
  content: "\f133";
  color: #555; /* 主色调 */
  --fa-secondary-color: #999; /* 次色调 */
  --fa-secondary-opacity: 0.7; /* 次色调透明度，范围0-1 */
  padding: 0 5px;
}

额外注意事项：

• 确保已引入Font Awesome 6的双色调资源：如果用CDN，链接需包含Duotone配置；如果本地引入，要确认对应字体文件已加载。
• 双色调图标的content值和对应实心图标的十六进制一致，无需重复写入多个content。

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