css - 在 css 内容中使用图标字体

Question

我正在尝试将字体图标与 zurb 基金会 icon pack 一起使用，当然您可以通过简单的方式内联显示它们；

<i class="fi-alert"></i>

除非我尝试将其用作 css 内容(这就是它们显示它们的方式...)，当我执行类似 content: "\f101" 的操作时，我不会得到相同的结果在 CSS 类内部。我只是让这些方 block 显示出来。

唯一的区别是我将它们包含在外部吗？通过;

<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">

或者什么？我只是在我的 sass 中缺少 src ref 或者类似的愚蠢的东西吗？我正在按照我期望的方式进行操作，并且在过去与其他人一起做过，但我没有从 css 中使用它们，只在 html 中内联显示？我知道这将是一些愚蠢的疏忽，因此可以使用另一双眼睛。

抱歉，已经有一段时间了，我的网络体验已经尘埃落定了。

Answer 1

您需要将font-family设置为您设置content的同一类中的图标字体。

.icon:after{
  font-family: "foundation-icons";
  content: "\f101";
}