ElementUi离线js，css文件后运行html图标显示不出的原因说明与我的解决方法【文章发布时间：2022年3月16日】

山顶洞人SSS

已于 2022-03-16 18:03:34 修改

阅读量2.4k

点赞数 6

分类专栏： Vue+elementUI学习记录文章标签： elementui vue.js

于 2022-03-16 13:31:28 首次发布

本文链接：https://blog.csdn.net/m0_67445049/article/details/123523614

版权

Vue+elementUI学习记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

说明：本文内容为“官网复制下来的JS，CSS文件运行后组件不显示图标”

element-ui版本：2.15.7；
Vue版本：2.6.14；

建立时间：2022年3月15日
-----------------------------------------------------------------------------------------------------------------
我们在Element-ui的官网将JS与CSS文件复制下来后，直接运行的话是不会显示Element组件的图标的，因为除了JS与CSS文件外，我们还需要下载两个图标文件woff与ttf。

Elementui的JS网址：https://unpkg.com/element-ui/lib/index.js

Elementui的CSS网址：https://unpkg.com/element-ui/lib/theme-chalk/index.css

①ttf与woff的官网下载地址：

https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff
https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.ttf

下载这两个图标文件后，要把他们放在指定的文件夹路径，不然的话也运行不了，原因是在Elementui的CSS文件中有一个引用图标文件的路径代码：

element-ui.css文件里CSS里的代码如下：

src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");

我们可以根据CSS里的文件路径去建立文件夹“fonts”然后把“woff”与“ttf”图标文件放进去，当然！我们也可以通过自己的需求去修改CSS文件里的路径，然后把图标文件放到自己的路径下的文件夹即可。

②我自己建立的文件路径举例图为下所示：

1，根目录

注：我在“js”文件中已经放了Vue.js文件，而且在one.html文件中引用了Vue.js文件，记住！Vue的引用代码要在Elementui引用代码的前面，不然Elementui使用不了。

2，element-ui目录

3，fonts目录

4，one.html为网页运行文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet"  href="element-ui/element-ui.css" />
		<script  src="element-ui/element-ui.js"  ></script>
		
	</head>
	<body>
		<div id="div">
			<el-row>
			  <el-col :sm="12" :lg="6">
			    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
			      <template slot="extra">
			        <el-button type="primary" size="medium">返回</el-button>
			      </template>
			    </el-result>
			  </el-col>
			  <el-col :sm="12" :lg="6">
			    <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
			      <template slot="extra">
			        <el-button type="primary" size="medium">返回</el-button>
			      </template>
			    </el-result>
			  </el-col>
			  <el-col :sm="12" :lg="6">
			    <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
			      <template slot="extra">
			        <el-button type="primary" size="medium">返回</el-button>
			      </template>
			    </el-result>
			  </el-col>
			  <el-col :sm="12" :lg="6">
			    <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
			      <template slot="extra">
			        <el-button type="primary" size="medium">返回</el-button>
			      </template>
			    </el-result>
			  </el-col>
			</el-row>
			
		</div>
		<script>
			var js = new Vue({
				el:"#div",	
				data:{
					text:"Hollo World"
					
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

运行结果如下：

【以上我整理的模板我已经上传到我的主页了，可以直接下载:

https://misspuyue.lanzouw.com/i0zdb01janih
密码:9hd8

】

山顶洞人SSS

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
ElementUi离线js，css文件后运行html图标显示不出的原因说明与我的解决方法【文章发布时间：2022年3月16日】

说明：本文内容为“官网复制下来的JS，CSS文件运行后组件不显示图标”element-ui版本：2.15.7；Vue版本：2.6.14；建立时间：2022年3月15日-----------------------------------------------------------------------------------------------------------------我们在Element-ui的官网将JS与CSS文件复制下来后，直接运行的话是不会显示Element组件的图标
复制链接

扫一扫