问题描述
-
今天在使用select组件的时候发现右边小图标不展示，如图所示
image.png -
在官方提供组件中应该是如下图所展示
image.png 问题排查
-
在有问题的页面打开开发者工具，有如图的发现
image.png
猜测是这两个文件无法加载导致
将本地文件css源切换成官方提供的css源
<link href="{% static 'css/element/index.css' %}" rel="stylesheet">
修改为
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-
切换源后打开页面，结果如图，正常展示
image.png -
再次打开开发者工具
image.png
发现该文件正常下载
- 据此得出结论，由于element-icons.woff 无法正常下载导致图标无法正常显示
- 解决方案
-
在页面显示正常的情况下，在此路径下https://unpkg.com/element-ui@2.9.1/lib/theme-chalk/fonts/element-icons.woff 将element-icons.woff下载下来
image.png -
将下载的文件存放至如图所示的目录 “根目录\statics\css\element\fonts”
image.png 将页面中的css源切换为本地源即可
<link href="{% static 'css/element/index.css' %}" rel="stylesheet">
如图
image.png
