社交图标网络字体在 codepen 中加载，但不是在本地测试或在线？答案

【问题标题】：Social Icon web font loads in codepen, but not in local tresting OR online?社交图标网络字体在 codepen 中加载，但不是在本地测试或在线？
【发布时间】：2014-02-12 22:36:11
【问题描述】：

这是我的笔：

http://codepen.io/MarcMurray/pen/cCdBu

这是我的页面：

http://daraghkane.bcfedigitalmedia.com/moh/

由于某种原因，字体拒绝在 codepen 之外本地或在线加载，我觉得这可能与我的 CSS 的这一部分有关：

@import url (..)
/* entypo */
[class*="entypo-"]:before

但老实说，我不知道如何解决它。有人有什么想法吗？

【问题讨论】：

标签： html css icons

【解决方案1】：

看起来您的@import 在样式表中的位置相当低。您是否尝试在 css 文件的开头添加它？

根据CSS Newbie：

您的 @imports 必须位于 CSS 中的所有其他内容之前。和我表示您的所有内容。甚至将 cmets 放在 @import 标记之前将导致您的导入失败。所以一定要先做你的进口你可以做任何其他事情。

另请参阅this very similar SO question - 我没有将其标记为可能的重复，因为另一个问题专门针对 Google 字体。

【讨论】：

【解决方案2】：

在您自己的工作中和/或在本地使用 CodePen 代码的最简单方法是下载手写笔的 .zip 文件，该文件将为您提供手写笔的完整副本，包括您将要使用的 prefixfree.min.js 文件需要让它工作。为此，只需转到 CodePen 上的笔页面，然后单击“共享”，然后单击“Export.zip”即可下载笔。在您的计算机上解压缩文件，您将拥有使用代码所需的所有文件，包括许可证！ P.s 我真的很喜欢这些图标！

【讨论】：