iconfont无法正常显示，只有一个正方形图标

Question

老师这是我的代码，iconfont无法正常显示，只能显示一个小长方形。好急好急

Answer 1

pzd88 2018-11-09 23:40:27

我今天也遇到了类似问题，已解决，大概方法是这样的：

第一个原因是styled-components版本问题，看了一下，到v4的版本后，injectGlobal改成了"createGlobalStyle"，看到题主也这样改了，并且 export 出来

第二个是去使用，我在项目里把对iconfont的使用，放到了“App.js”里，大概如下：

之后在"common/header/index.js"文件里直接使用"<i className='iconfont'>&....;</i>"就可以正常显示了。

不知道能不能解决你的问题？

• 提问者 DKMINI #1

  感谢交流，按照你的方法解决问题了，太谢谢了。项目做完就只有icon不显示。现在完美了。

• pzd88 回复 提问者 DKMINI #2

  哦，不客气，我也是研究了一会才发现的。我是先在全局的 style.js 里添加一个class，在其他地方使用这个class，发现没起作用，估计是 createGlobalStyle的使用有问题，去 styled-components 官网查下 api，里面有对这个方法的示例，试一下发现可以。
  至于这个是不是完美的解决方法，我也不确定，刚学react不久 :)

• 提问者 DKMINI #3

  加油一起努力，我准备再做一个项目，再熟练熟练。

点开查看后面5条评论

Answer 2

DonkeyBird 2019-05-16 18:51:29

默认下载的有括号是（.iconfont）要将括号去掉

将这个组件导入app.js中

最后就可以显示了，到处是坑，哎

Answer 3

屿秋s 2018-12-07 11:24:58

font-class形式不行呀

Answer 4

慕先生7114965 2018-11-06 21:22:45

同款错误~~

Answer 5

提问者 DKMINI 2018-10-30 20:09:07

这是我的package.json文件，是不是因为依赖包的版本太高了，我也搞不懂，弄了好久都不行，但是下载了老师你的代码就可以打开。我对比了下，没有差别的。很奇怪

• Dell #1

  重新下载一次字体

• 提问者 DKMINI 回复 Dell #2

  重新下载了，但是还是不行

• 聆空 回复 Dell #3

  求解决新版本的styled-components的问题。无法正常导入字体呢

点开查看后面1条评论