从 iconfont 下载的文件和老师下载的不一样，且打开demo里面，icon 都显示不出来

来源：7-4 使用 iconfont 嵌入头部图标

powerful_girl

2021-09-30

老师，您好，我从 iconfont 官网上下载的文件，里面文件包括如下内容
图片描述
没有你视频里面的 eot 和 svg 文件，且 woff 文件有 2 个。
我打开 demo_index.html 文件，里面的 icon 也都显示不出来。

图片描述

代码层面和老师写法几乎一样，就是采用了 createGlobalStyle 能力
![![ 图片描述

图片描述

这个报错后，我尝试用 iconfont 的在线链接进行替换，但是界面上还是无法展示出 icon
图片描述

写回答

1回答

powerful_girl

提问者

2021-10-01

问题解决了，替换使用了 symbol 的引入方式：

1. 在 public 文件夹的 index.html 中，引入

<script src="http://xxxxxx"></script>

xxx 是 iconfont 里面的 icon 在线获取地址

2. 在 header 的 index.js 里面引入 svg 标签

<svg className="iconfont" aria-hidden="true">
<use xlinkHref="#icon-yongyan"></use>
</svg>

注意这里 xlinkHref 千万不要写成 xlinkHref

完成后 icon 可以正确显示在界面上

//img.mukewang.com/szimg/615671e609a9a5b114340150.jpg

React零基础入门到实战，完成企业级项目简书网站开发

主流新技术 React-redux，React-router4，贯穿基础语法

5275 学习 · 2496 问题

相似问题

回答 5

回答 3

回答 12

回答 3

回答 1