0

我的自定义图标字体未显示在我的网站上。我花了很多时间寻找可能的原因,从浏览器设置到 Unicode 范围。基本上,我已经按照这里的教程进行操作:http: //tympanus.net/Blueprints/ResponsiveIconGrid/

我在我的网站上成功实现了它。功能,风格 - 一切都在检查中。除了代替图标,我看到矩形/正方形,至少可以说是令人沮丧的。

我使用完全相同的浏览器来查看两个网站,并且可以很好地看到 codrops 上的图标。你们对可能是什么问题有任何提示吗?

我已将字体添加到我的 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 来编译网站。不过,我看不出这会产生怎样的负面影响。莫非缪斯在修补字体?

4

1 回答 1

2

好的,我相信您的问题出在这里:

编辑:希望有更清晰的说明。

您的.cbp-ig-icon类可能没有正确地被定义内容的其他类继承。double 可能发生了一些事情:before。作为测试,直接在.cbp-ig-icon:before(font-family, etc) 下定义内容,直接到您的 .cbp-ig-icon-show:before,看看是否有效。

.cbp-ig-icon:before {
  font-family: 'anyoldicon';
  ...
}

.cbp-ig-icon-shoe:before { /** This is a totally separate class **/
  content: "\e000";
}
于 2013-08-21T20:35:02.207 回答