在 css 内容中使用图标字体

Question

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

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

除非我尝试将它用作 css 内容（这是他们显示它们的方式...）当我在一个 css class。我只是让那些方块显示出来。

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

<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 相同 class 的图标字体。

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

Answer 2

要在这样的 css 选择器中使用它们，您必须实际为您的页面安装字体系列，并在使用代码之前在 css 选择器中声明该字体系列。

Answer 3

请提供对您有效和无效的代码示例。

如果您尝试通过将 :content 添加到不属于图标包的现有 css 元素来显示图标，这将不起作用。例如，这将不起作用：

HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}

使用'i'标签添加图标：

HTML: <li class="icon"><i class="fi-alert"></i>text </li>

每次看到方块时，您都需要检查是否加载了字体文件。如果您想在服务器上加载 css 并手动 link 它们，图标集会使用 4 种字体：

Using icon font in css content