如何在SVG JS中使用Font Awesome Pro5的:after/:before？求可行示例

嘿，我懂你碰到的难题了——SVG元素本身并不支持CSS的:before/:after伪类，这和咱们熟悉的HTML环境完全不一样，哪怕你已经加载了Font Awesome Pro 5的JS库，也没法直接套用HTML里那套伪类用法。别慌，我给你几个在SVG+JS环境下绝对可行的替代方案，附完整示例：

Font Awesome 5的JS库会自动把所有图标定义注入到页面的SVG <defs>中，所以你可以直接在自己的SVG里用<use>标签引用这些图标，以此模拟伪类的“附加元素”效果。

<svg width="250" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 目标SVG元素，比如一个按钮形状的矩形 -->
  <rect x="20" y="20" width="180" height="60" rx="8" fill="#2563eb" />
  <text x="110" y="55" text-anchor="middle" fill="#fff" font-size="16">
    点击登录
  </text>

  <!-- 引用Font Awesome Pro的Solid风格用户图标，放在按钮左侧 -->
  <use href="#fas-user" x="45" y="35" width="30" height="30" fill="#fff" />
</svg>

<!-- 加载Font Awesome Pro JS库（确保你的Pro配置正确） -->
<script src="fontawesome-all.min.js"></script>

说明：

• #fas-user对应Pro版本的Solid风格用户图标，如果你想用Regular风格，就改成#far-user，Brands风格则是#fab-xxx（比如#fab-github）。
• 通过调整x/y/width/height属性，就能精准控制图标的位置和大小，完全模拟:before/:after的定位效果。

如果需要根据业务逻辑动态添加图标（比如点击按钮后显示图标），可以用官方提供的JS API来生成图标元素，再插入到SVG中。

<svg id="my-custom-svg" width="250" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 目标元素：一个待添加图标的矩形 -->
  <rect id="action-box" x="20" y="20" width="180" height="60" rx="8" fill="#16a34a" />
</svg>

<script src="fontawesome-all.min.js"></script>
<script>
// 初始化Font Awesome配置，确保图标以SVG节点形式生成
window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };

// 创建一个Pro版本的Regular风格邮件图标
const mailIcon = window.FontAwesome.icon({
  prefix: 'far',
  iconName: 'envelope'
});

// 获取目标SVG容器和元素
const svgContainer = document.getElementById('my-custom-svg');
const targetBox = document.getElementById('action-box');

// 配置图标属性：位置、大小、颜色
const iconElement = mailIcon.node[0];
iconElement.setAttribute('x', '100');
iconElement.setAttribute('y', '35');
iconElement.setAttribute('width', '30');
iconElement.setAttribute('height', '30');
iconElement.setAttribute('fill', '#fff');

// 把图标插入到SVG容器中
svgContainer.appendChild(iconElement);
</script>

说明：

• FontAwesome.icon()方法会返回包含SVG节点的对象，通过node[0]可以拿到原生SVG元素。
• 这种方式适合动态场景，比如根据用户操作、数据状态来添加或修改图标。

如果你实在想沿用CSS伪类的写法，可以在SVG里用<foreignObject>嵌入HTML元素——HTML元素是支持:before/:after伪类的。

<svg width="250" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 用foreignObject嵌入HTML内容 -->
  <foreignObject x="20" y="20" width="180" height="60">
    <div xmlns="http://www.w3.org/1999/xhtml" class="btn-with-icon">
      发送消息
    </div>
  </foreignObject>
</svg>

<style>
.btn-with-icon {
  width: 100%;
  height: 100%;
  background: #f59e0b;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-family: sans-serif;
}

.btn-with-icon:after {
  content: "\f0e0"; /* Font Awesome邮件图标的Unicode */
  font-family: 'Font Awesome 5 Regular'; /* Pro版本Regular风格的字体族 */
  margin-left: 10px;
  font-size: 20px;
}
</style>

<script src="fontawesome-all.min.js"></script>

说明：

• 必须给<div>指定xmlns="http://www.w3.org/1999/xhtml"，否则HTML内容不会被正确解析。
• 字体族要和图标风格对应：Solid风格是'Font Awesome 5 Solid'，Regular是'Font Awesome 5 Regular'，Brands是'Font Awesome 5 Brands'。
• 图标的Unicode可以在Font Awesome官网的对应图标页面找到。

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