如何在WooCommerce产品页标签标题前添加FontAwesome图标

你遇到的换行问题，主要是伪元素和标签内的链接元素布局不兼容导致的。按下面的方法修改CSS即可解决：

修正后的CSS代码 #

/* 附加信息标签 */
li.additional_information_tab::before {
  content: "\f005"; /* 这里用FontAwesome的Unicode转义字符，替换成你需要的图标代码 */
  font-family: "FontAwesome";
  padding-right: 10px;
  display: inline-block;
  vertical-align: middle; /* 关键：让图标和标题垂直对齐，避免换行 */
}

/* 如果主题把标签链接设为块级，强制改成inline-block */
li.additional_information_tab a {
  display: inline-block;
  vertical-align: middle;
}

如果要给三个标签（描述、附加信息、评论）分别设置不同图标，可以用下面的完整代码：

/* 描述标签 - 示例图标：文件文本 */
li.description_tab::before {
  content: "\f02d";
  font-family: "FontAwesome";
  padding-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

/* 附加信息标签 - 示例图标：星星 */
li.additional_information_tab::before {
  content: "\f005";
  font-family: "FontAwesome";
  padding-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

/* 评论标签 - 示例图标：对话气泡 */
li.reviews_tab::before {
  content: "\f075";
  font-family: "FontAwesome";
  padding-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

/* 统一处理所有标签的链接元素 */
li.description_tab a,
li.additional_information_tab a,
li.reviews_tab a {
  display: inline-block;
  vertical-align: middle;
}

关键说明 #

1. Unicode字符写法：要直接用\f005这种格式的转义字符，不要用HTML实体（比如你原来的"005"），否则图标可能无法正常显示。
2. 垂直对齐：添加vertical-align: middle可以让图标和标题文字在同一行垂直居中，避免因布局基线差异导致的换行。
3. 链接元素调整：部分主题会把WooCommerce标签的链接设置为display: block，这会让链接单独占一行，所以需要把它改成inline-block，和图标保持在同一行。

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