使用Fantasticon生成的图标字体，如何支持Span内容调用？

问题背景 #

我们希望制作一套类似material-icons的自定义图标字体，已通过Fantasticon生成woff文件，目前通过样式类（如icon-weiter）调用图标正常，但想要实现像主流图标库那样，将图标名作为span标签的内容（而非样式类）来调用，请问使用Fantasticon生成时是否遗漏了相关配置？

现有代码 #

Fantasticon生成的默认CSS代码 #

@font-face {
font-family: "Company Icons";
src: url("./Company Icons.eot?b5a07dabf1643d1512d57b5333f6d08b#iefix") format("embedded-opentype"),
url("./Company Icons.woff2?b5a07dabf1643d1512d57b5333f6d08b") format("woff2"),
url("./Company Icons.woff?b5a07dabf1643d1512d57b5333f6d08b") format("woff");
}

i[class^="icon-"]:before, i[class*=" icon-"]:before {
font-family: Company Icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-weiter:before {
content: "\f101";
}

自行编写的span支持代码 #

@import "Company Icons.css";

@font-face {
font-family: "Company Icons";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("./Company Icons.eot?b5a07dabf1643d1512d57b5333f6d08b#iefix") format("embedded-opentype"),
url("./Company Icons.woff2?b5a07dabf1643d1512d57b5333f6d08b") format("woff2"),
url("./Company Icons.woff?b5a07dabf1643d1512d57b5333f6d08b") format("woff");
}

.company-icons {
font-family: "Company Icons", sans-serif;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}

解决方案 #

Fantasticon默认生成的是类名+伪元素content的调用方式，要实现“图标名作为span内容”调用，核心是让字体文件支持**连字（Ligatures）**功能，或者调整字符映射规则，以下是两种可行方案：

方案1：调整Fantasticon配置启用连字（推荐） #

这种方式和material-icons的实现逻辑一致，通过字体的连字特性，将输入的图标名字符串替换为对应图标字形。

1. 创建/修改Fantasticon配置文件（比如fantasticon.config.js）：

module.exports = {
  input: "./src/icons", // 你的图标源文件路径
  output: "./dist", // 输出路径
  fontName: "Company Icons",
  ligatures: true, // 启用连字功能
  // 为每个图标指定对应的连字字符串（即图标名）
  glyphs: {
    "weiter": { ligature: "weiter" },
    // 其他图标按此格式添加，比如：
    // "home": { ligature: "home" }
  }
};

2. 重新生成字体和CSS文件。生成后，你只需要保留自行编写的.company-icons类（无需默认的类名伪元素代码），调用方式如下：

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

此时span内的weiter会被字体的连字规则替换为对应的图标。

方案2：纯CSS兼容方案（无需重新生成字体） #

如果不想重新生成字体，可以通过CSS属性选择器结合自定义变量实现接近需求的调用方式：

在你已有的CSS代码基础上添加以下内容：

/* 用data-icon属性传递图标名 */
.company-icons[data-icon]:before {
  content: var(--icon-content);
}

/* 为每个图标绑定对应的Unicode码 */
.company-icons[data-icon="weiter"] {
  --icon-content: "\f101";
}
/* 其他图标同理 */

调用方式：

<span class="company-icons" data-icon="weiter"></span>

虽然不是直接将图标名写在span内容里，但无需修改字体文件，实现成本低。

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