如何在AMP的<style amp-custom>中正确引入FontAwesome 6图标？

问题分析 #

你当前的核心错误是把FontAwesome的CSS样式文件当成字体资源在@font-face中引用，同时缺少图标渲染必需的核心样式规则，导致图标无法正常显示。

修正方案（AMP兼容版） #

1. 替换错误的@font-face规则

FontAwesome的@font-face需要直接指向字体文件（woff2/woff格式），而非CSS文件。以下是Free版核心字体的正确规则：

<style amp-custom>
/* Font Awesome 6 Free 常规字体（用于空心图标） */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/webfonts/fa-regular-400.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/webfonts/fa-regular-400.woff') format('woff');
}

/* Font Awesome 6 Free 实心字体（用于大部分常用图标） */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/webfonts/fa-solid-900.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/webfonts/fa-solid-900.woff') format('woff');
}

/* 图标核心渲染样式 */
.far, .fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
}
.fa-solid {
  font-weight: 900; /* 实心图标需要对应900字重 */
}

/* 可选：添加动画样式（如旋转） */
.fa-spin {
  animation: fa-spin 2s linear infinite;
}
@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

2. 正确调用图标

在HTML中使用对应类名渲染图标：

<!-- 实心图标示例 -->
<i class="fa-solid fa-house"></i>
<!-- 空心图标示例 -->
<i class="far fa-user"></i>

关键错误点说明 #

1. 错误的资源引用：你在@font-face的src中填入了CSS文件地址，浏览器无法将其识别为字体资源，必须替换为实际的woff2/woff字体文件。
2. 缺失核心样式：FontAwesome图标需要通过类名指定对应的字重和字体族，你之前的代码没有设置这些规则，导致图标无法被正确渲染。
3. 不必要的全局字体设置：给body设置font-family: "Font Awesome 6 Free"会让普通文本强制使用图标字体，完全没有必要，应仅在图标元素上指定字体。

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