ElementUI 图标字体无法正常显示 本地CDN文件
本文中部分代码来自ElementUI官网
一、样式无法正常显示
1、检查CDN引用文件路径
检查引入elementUI的CSS、JS文件的路径是否正确【官网样例】
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
**建议将引用文件的网址复制到浏览器地址栏里打开，然后将全选拷贝下来存到本地,以免因Element 升级受到非兼容性更新的影响**
2、检查是否引入Vue.js文件
vue.js文件引入位置必须在elementUI的JS文件上面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
3、elementUI 必须在Vue作用域里
如下代码段：
vue作用域：el:'#app'
elementUI组件写在必须在<div id=''app''></div>，否则无法显示
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
二、elementUI图标等显示异常
本地化elementUI组件CDN文件后，图标显示异常
1、未引用文字图标库文件
（1）问题状态
在浏览器打开页面——>F12——>network
查看element-icons.woff element-icons.ttf 这两个字体图标库文件是否引入
如果这两个文件404则未找到（或路径错误）字体图标库文件
（图中为element-icons1.woff是为了演示未找到（或路径错误）字体图标库文件状态）
（2）解决办法
-
进入elementUI的CSS文件 先将
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">文件本地化（复制粘贴到本地） -
打开后查找关键字
@font-face
- 检查这两个URL路径是否正确，或者文件是否存在。
官方字体图标库下载路径
点击文件——>点击view raw下载 （注意版本选择，一般是最新的就能用）
2、已经引用字体图表库文件
（1）问题状态
已经引入element-icons.woff element-icons.ttf 这两个文件，而且路径也正确，但是图标依然不显示，或显示错误
（2）解决办法
这种情况一般是字体图标库文件和引入的elementUI的css文件版本不一致或版本差距过大，更换到版本一致的字体图标库文件即可
下载方法在上两张图前面
Tips:一般引入CSS JS文件去官方网站下载或者引用，别百度搜文章引用别人文章里的CDN链接或文件，这样很有可能会出现版本不匹配的问题。
下一篇： 贵霜帝国和汉朝打过吗？最后结果怎么样