HTML标记文本内容由图标替换

Question

我多年来一直在使用像font-awesome这样的标志性字体。

到现在为止，当我需要在网页上添加心形图标时，我使用这个html语法

<i class="fa-heart"></i>

从技术上讲，它使用伪元素:before并将类名与标志性字体的字符链接

fa-heart:before {
  content: "\f004";
}

但是，在下一个font-awesome版本的文档中，新的方法是：

<i class="fa">heart</i>

从技术上讲，如何用相应的图标替换 heart 字词？诀窍在哪里？

Answer 1

他们将这组字符称为连字，然后可以将其作为一个独特的图标。

基本上，连字是两个或多个字符的组合，当字体指定这些组合时，它可以选择如何显示组合它们的结果。

传统上，结扎线用于将两个字母连接在一起，因此当它们彼此相邻放置时它们会很好地流动。此技术使用CSS版本的连字来设置自定义图标。

有关该主题的更多信息，请查看此页面： https://css-tricks.com/ligature-icons/

这个问题也在材料图标的答案中讨论过： https://stackoverflow.com/a/44928943/1528308

Answer 2

从这篇文章：https://alistapart.com/article/the-era-of-symbol-fonts

  

字体也经常使用称为连字的特殊字符   很难察觉，调整用于辅助的字体   读。举个例子，两个连续的“f”字符。一个好的   font会将“ff”转换为fs中的单个连字   顺利连接。有几种标准的连字，包括ff，   fl，和fi。但是没有理由你也不能定义自己的。在   一个字体文件，它是一个简单的替换;所有的结扎都在寻找   for是正确的字母序列。当他们打字时，他们是   替换为另一个字形。这意味着您可以拥有类似“A”的字符串   List Apart“并将其转换为徽标的单个符号图标。