我的自定义图标字体未在我的网站上显示。我花了很多时间寻找合理的原因,从浏览器设置到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>
我可能错过了什么?老实说,我宁愿不显示网址,因为它不会教你什么。正如所描述的那样 - 相同的布局,但在一个网站上可见并在另一个网站上断开。
这是与图标和网格动画相对应的CSS: http://pastebin.com/94UgpN8B我还应该提一下,这个图标字体是由IcoMoon生成的,如果有任何帮助的话。
最后,我使用Muse来编译网站。我不知道这会产生怎样的负面影响。可能是某种程度上缪斯正在修补字体?
答案 0 :(得分:2)
好的,我相信你的问题就在这里:
编辑:希望更明确的说明。
您的.cbp-ig-icon
类可能无法被定义内容的其他类继承。双:before
可能会发生一些事情。作为测试,直接将.cbp-ig-icon:before
(font-family等)下的内容直接定义到.cbp-ig-icon-show:之前,然后查看是否有效。
.cbp-ig-icon:before {
font-family: 'anyoldicon';
...
}
.cbp-ig-icon-shoe:before { /** This is a totally separate class **/
content: "\e000";
}