Font Awesome Pro通过CSS生成图标仅显示普通版，如何实现轻量版（不修改HTML）

我完全懂你的需求——不想碰HTML结构，只靠CSS/JS来切换到轻量（Light）风格图标。其实核心问题在于Font Awesome的不同风格是通过字体族+字重区分的，你之前的代码只指定了图标Unicode，没给伪元素设置Light风格对应的字体配置，所以默认渲染了普通版本。下面分两种方案详细说明：

一、纯CSS方案（最推荐） #

这是最简单直接的方式，只要给你的图标伪元素指定正确的字体族和字重即可。

1. 单个图标类的配置 #

如果只有特定几个图标需要切换到Light风格，直接给对应的类写样式：

/* 通讯录图标示例 */
.icon-link::before {
  content: "\f2bb";
  /* 关键：指定Font Awesome Pro的字体族和Light对应的字重 */
  font-family: "Font Awesome 6 Pro"; /* 注意：不同版本字体名可能有差异，比如Font Awesome 5 Pro直接用这个名称即可 */
  font-weight: 300; /* Light风格对应的字重是300，务必加上 */
}

2. 批量处理所有图标类 #

如果你有很多.icon-前缀的图标类，不想逐个写，可以用属性选择器统一配置：

/* 匹配所有以.icon-开头的类，或者包含空格+icon-的类（避免冲突） */
[class^="icon-"]::before, 
[class*=" icon-"]::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 300; /* 全局设置为Light风格 */
  /* 若个别图标需要保持普通版本，单独写样式覆盖即可 */
}

前置条件：确保Light字体已正确加载 #

不管用哪种CSS方案，你得先保证Font Awesome Pro的Light字体已经被页面加载。如果是本地字体，需要通过@font-face引入：

@font-face {
  font-family: "Font Awesome 6 Pro";
  src: url("/fonts/fontawesome-pro-light-300.woff2") format("woff2"),
       url("/fonts/fontawesome-pro-light-300.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

如果用的是官方Pro CDN，只要你引入的是包含Light风格的资源包，字体就会自动加载。

二、JavaScript/JQuery方案（动态场景适用） #

如果你的图标是动态生成的，或者需要在运行时切换风格，可以用JS动态注入CSS规则：

1. JQuery版本 #

// 动态创建style标签并添加到head中
$('head').append(`
  <style>
    .icon-link::before {
      content: "\\f2bb";
      font-family: "Font Awesome 6 Pro";
      font-weight: 300;
    }
    /* 可继续添加其他图标类的配置 */
  </style>
`);

2. 原生JavaScript版本 #

const lightIconStyle = document.createElement('style');
lightIconStyle.textContent = `
  [class^="icon-"]::before, [class*=" icon-"]::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
  }
`;
document.head.appendChild(lightIconStyle);

关键注意点 #

• 字体名称要准确：Font Awesome 5 Pro和6 Pro的字体族名称可能略有不同，比如6 Pro的Light风格有时候会用"Font Awesome 6 Light"作为单独字体族，这时候你需要把font-family改成这个名称，同时去掉font-weight（因为单独字体族已经对应Light风格）。你可以通过浏览器开发者工具的字体面板查看实际加载的字体名称。
• Unicode要对应：确保你用的content值是目标图标对应的Unicode（Font Awesome同一图标在不同风格下的Unicode通常一致，只是字体渲染效果不同）。

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