如何用CSS/SCSS将span内容转为类名？自定义图标字体适配求助

初始疑问 #

能否仅通过CSS/SCSS实现以下效果：当<span>带有fooBar类时，将

<span class="fooBar">content</span>

渲染为

<span class="fooBar content"></span>

实际业务场景补充 #

原本我们使用Material Icons，现在UI/UX团队要求替换为自定义图标字体，希望实现和Material Icons一致的调用方式：

Material Icons的调用示例：

<span class="material-icons-outlined">add</span>

通过这种方式即可正常显示对应图标。

我们参照Material Icons的CSS结构制作了自有图标字体，但目前仅能通过将图标名称作为类名的方式生效，无法实现像上面那样把图标名称作为<span>内容的调用方式。我们期望的使用方式是：

<span class="company-icons">custom</span>

当前代码情况 #

• Fantasticon生成的默认代码：
  
• 我额外添加的代码：
  
  （注：红色下划线是修改公司名称导致的，原名称可正常加载字体文件）

使用效果 #

图中下方的调用方式（图标名作为类名）生效，上方期望的调用方式（图标名作为内容）不生效。

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