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屋！