在 css 内容中使用图标字体

Question

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

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

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

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

<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";
}