javascript - @font-face图标是方框,怎么回事?
本文介绍了javascript - @font-face图标是方框,怎么回事?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
使用某个插件,然后,然后按照操作,该放的都放了,然后,就是那些图标出现方框,不显示,这怎么回事。
这跟font-face有关吗?
如何解决?
正常应该是这样的:
然后,我也添加了,那个什么fontfact文件啦
然后看看console里面里面的span都有加载啊:
然后,报错的:
完全不知道这种图标是怎么回事!!我要去下载这字体,还是什么东东么?源码包都没有..
解决方案
font-awesome库的官网地址: http://fontawesome.io/
font-awesome里面还有个fonts文件夹,你要把字体文件放到对应的位置;或者放入一个任意的位置,然后修改font-awsome.css里面url地址。
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
font-awesome及其类似icon库的工作原理:
在css定义一些类似这样的样式:
.fa-cog:before {
content: "\f013";
font: FontAweSome;
}
f013是一个一般字体里不存在的字符,对这个字符应用FontAweSome这个字体,而这个字体里面有这个图标的描述。以达成了想要的效果。
出现方块的原因就是FontAweSome字体没有加载成功。
这篇关于javascript - @font-face图标是方框,怎么回事?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文