HTML引入ElementUi 不显示图标

目中有用到图标 但是遇到了一些问题 在此仅做下记录

1.按官方文档：（缺点是没有网络情况下加载不出）

1
2
3
4
<!-- 引入样式 -->
<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>

2.把elementUI中的css、js下载到本地 ，页面引本地的css、js 但是图标不显示（非网络状态下的）

3.原因  在本地的index.css中发现图标路径问题：

1
2
3
4
5
6
7
@font-face {
    font-family: element-icons;
    src: url(fonts/element-icons.woff?t=1472440741) format('woff'),        
    url(fonts/element-icons.ttf?t=1472440741) format('truetype');
    font-weight: 400;
    font-style: normal
}　　

4.所以需要自己下载一个字体 、图标文件，新建fonts文件夹 ---> 放到css/fonts 如图：
Jsky博客

把 index.js 和 index.css 都替换掉 最好

 5.参考网上其他资料的链接下载，但引到本地都不好用，在此建议大家在一个空文件用 cnpm下载node_modules，需要什么从里面复制出来

1
cnpm i element-ui -S

Jsky博客

 

 路径是 node_modules-->element-ui--->theme-chalk--->fonts

如果路径不存在 则 直接在文件夹下 搜索 fonts 然后把 index.js 和 index.css 都替换掉 最好

 拿到fonts放到项目中css文件夹下 就可以了


参考文章：https://www.cnblogs.com/hanhanours/p/11942762.html


Jsky博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论