多年来，我一直在使用 font-awesome 等标志性字体。
直到现在，当我需要在网页上添加心形图标时，我都使用这种 html 语法
<i class="fa-heart"></i>
从技术上讲，它使用伪元素:before 并将类名与标志性字体的字符链接
fa-heart:before {
content: "\f004";
}
但是，在下一个 font-awesome 版本的文档中，新的方法是：
<i class="fa">heart</i>
从技术上讲，如何用相应的图标替换 heart 词？诀窍在哪里？
【问题讨论】：
标签： html css font-awesome
他们将一组字符称为连字，然后可以对其进行操作以变成一个独特的图标。
基本上，连字是两个或多个字符的组合，当字体指定这些组合时，它可以选择如何显示组合它们的结果。
传统上，连字用于将两个字母连接在一起，这样它们在彼此相邻放置时可以很好地流动。此技术使用 CSS 版本的连字来设置自定义图标。
有关该主题的更多信息，请查看此页面： https://css-tricks.com/ligature-icons/
在这个答案中也讨论了关于材质图标的问题： https://stackoverflow.com/a/44928943/1528308
【讨论】：
来自这篇文章：https://alistapart.com/article/the-era-of-symbol-fonts
字体也有称为连字的特殊字符——通常是微妙的 几乎不引人注意，对用于帮助的字体进行了调整 阅读。以两个连续的“f”字符为例。一个好的 字体会将“ff”转换为单个连字，其中 fs 连接顺畅。有几种标准连字，包括 ff， 和fi。但是没有理由你不能也定义你自己的。在 一个字体文件，它是一个简单的替换；所有的连字都在看 for 是正确的字母序列。当它们被输入时，它们是 替换为另一个字形。这意味着你可以有一个像“A List Apart”并将其转换为徽标的单个符号图标。
【讨论】：