自定义字体显示在教程网站,但不是在我的



我花了大量时间寻找可能的原因,从浏览器设置到unicode范围。

基本上,我遵循了这里的教程:http://tympanus.net/Blueprints/ResponsiveIconGrid/我在我的网站上成功地实现了它。功能、风格——一切都在检查之中。除了图标之外,我看到的是矩形/正方形,至少可以说这很令人沮丧。

我使用完全相同的浏览器来查看这两个网站,我可以很好地看到codrop上的图标。你们有什么暗示吗?

下面是添加字体的CSS,它似乎在检查中:

@font-face {
    font-family: 'anyoldicon';
    src:url('assets/anyoldicon.eot');
    src:url('assets/anyoldicon.eot?#iefix') format('embedded-opentype'),
        url('assets/anyoldicon.woff') format('woff'),
        url('assets/anyoldicon.ttf') format('truetype'),
        url('assets/anyoldicon.svg#anyoldicon') format('svg');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+00-FFFF;
}

这是我的HTML:

<li>
    <a href="#">
        <span class="cbp-ig-icon cbp-ig-icon-whippy"></span>
        <h3 class="cbp-ig-title">George</h3>
        <span class="cbp-ig-category">Smith</span>
    </a>
</li>

还有什么我可能错过的吗?老实说,我宁愿不显示URL,因为它不会教你更多。它就像描述的一样——同样的布局,但在一个网站上可见,在另一个网站却被破坏了。

这里还有与网格的图标和动画相对应的完整CSS:http://pastebin.com/94UgpN8B我还应该提到,这个图标字体是由IcoMoon生成的,如果这有任何帮助的话。

我正在使用Muse来编译网站,老实说,其他项目的图标也没有起作用。可能是那里的什么东西吗?

我还没有收到控制台中关于资产的任何404错误。

我还尝试单独定义图标样式,以消除错误继承类属性的可能性(查看pastebin CSS),但这也不起作用。

编辑这是另一个.CSS文件,它对应于这个"插件"功能的另一部分。除了一个非常标准的morenizr.js 之外,它是唯一一个与此相关的其他文件

hxxp://pastebin.com/c7w1LEBf

您的文件夹结构是什么?

你的css文件放在哪里,是在一个单独的文件夹中吗?如果字体在"assets/"中,css在"assets/css"中,则需要将路径更改为
src:url('../assets/anyoldicon.eot');
注意路径前面的"../"

最新更新