React Styled Components中CSS伪元素无法加载Font Awesome图标求助

1. 修复代码语法错误 #

你的代码存在未闭合的模板字符串和CSS块，这会直接导致CSS解析失败，伪元素被浏览器忽略。修正后的完整代码如下：

export const Button = styled.a`
  padding: .8rem 2.5rem;
  padding-right: 3.5rem;
  border-radius: 8px;
  transition: .3s;
  color: #f23801;

  span {
    position: relative;
    transition: 0.3s;
    &::after {
      content: "\\f061"; /* JS模板字符串中反斜杠需转义，否则会被当作特殊字符处理 */
      font-family: "FontAwesome";
      position: absolute;
      right: -20px;
      transition: 0.3s;
      display: inline-block; /* 确保伪元素能正确占据空间 */
      font-weight: 900; /* 适配Font Awesome 5+版本的图标权重要求 */
    }
  }
`

2. 确认Font Awesome的引入方式 #

伪元素调用图标仅支持Web Fonts + CSS的引入方式，SVG Core组件方式不兼容：

• CDN引入：在HTML头部添加对应版本的CSS链接

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

• npm安装：在项目入口文件中导入CSS

  import '@fortawesome/fontawesome-free/css/all.min.css';
  

3. 匹配Font Awesome版本的字体名称 #

不同版本的Font Awesome字体名称有差异，需根据实际引入版本调整font-family：

• Font Awesome 4：font-family: "FontAwesome";
• Font Awesome 5+/6：font-family: "Font Awesome 6 Free";（需对应版本号）

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