普通html使用引入element-ui，图标出错

1年前作者：泡芙姜饼分类：Toy博客阅读(10)违法举报

这篇具有很好参考价值的文章主要介绍了普通html使用引入element-ui，图标出错。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

利用CDN引入element-ui，图标显示出现错误。

利用网页链接形式引入可以正常显示。
普通html使用引入element-ui，图标出错

将网站文档下载至本地，再引用就会出错。
普通html使用引入element-ui，图标出错

例如使用element-ui里面的走马灯，两侧的箭头图标不能正常显示。
普通html使用引入element-ui，图标出错

先按照按照网上的方法，下载element-ui文件到本地。再将index.css（路径：element-ui/lib/theme-chalk/index.css）和index.js(路径：element-ui/lib/index.js)文件导入项目中。
普通html使用引入element-ui，图标出错

如果按照这种方法依旧无法解决，可以继续看下去。

按照这种方法仍然没有解决问题，图标依旧无法正常显示，所以尝试将整个element-ui导入项目，经测试后可以正常使用。
普通html使用引入element-ui，图标出错

普通html使用引入element-ui，图标出错

还有一种方法，如果已经安装过npm,则可以使用npm引入element-ui.（由于是普通html项目，不是vue项目，所以无法像官方文档里描述的那样修改文件直接使用。）

在当前项目（普通html项目）中打开终端，使用npm安装element-ui。
普通html使用引入element-ui，图标出错

普通html使用引入element-ui，图标出错

引入成功后，项目中会出现一个node-modules文件夹，可以在里面找到element-ui,然后根据路径找到index.js和index.css进行引用（按照node_modules/element-ui/lib/index.js和node_modules/element-ui/lib/theme_chalk/index.css路径引用）。
普通html使用引入element-ui，图标出错文章来源地址https://www.toymoban.com/news/detail-428908.html

到了这里，关于普通html使用引入element-ui，图标出错的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Vue Element-UI使用icon图标(第三方)--在线版
Element-ui一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，在Vue中使用是很方便的。关于引用icon（第三方），有一种不用下载项目到本地的方法， element自带的有icon，使用起来也很方便。但是美中不足的是，官方提供的图标库只是部分，在需要新的icon时，
2024年02月06日
浏览(40)
解决 element ui 本地使用引入图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题原因因为文件内缺少两个文件根据控制台提示发现少了.ttf和.woff两个文件 1）element-icons.ttf 2）element-icons.woff 下载地址如下： 4.下载地址element-icons.ttf 5.下载地址element-icons.woff 下载完毕后放入文件夹内后修改
2024年02月07日
浏览(16)
Vue2使用element-ui引入自定义主题的方法（使用在线主题生成工具）
第一步：按照官方文档使用npm安装element-ui，并完整引入Element-ui npm i element-ui -S main.js中所有的内容删去，改为随便写点东西，run一下成功引入element-ui，但是不喜欢默认的蓝色，看起来很烂大街，想换掉。第二步：由于不喜欢默认的蓝色主题，可以使用在线主题生成工具
2024年02月14日
浏览(16)
element-ui 实现图标选择器
实现效果图：代码如下：
2024年02月13日
浏览(9)
引入element-ui步骤（按需引入和全局引入）
两种引入方式 1）完整引入 2）按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 a）先安装 babel-plugin-component： b）修改 babel.config.js 的内容 c）创建文件 element.js(名字自定义) d）最后在main.js中添加代码
2024年02月16日
浏览(15)
element-ui更改图标icon大小
element-ui改变icon大小在template里面加入div 再在style样式中这就相当于给块组件赋予了形状大小的属性。
2024年02月11日
浏览(10)
element-ui按需引入
1、安装elment-ui组件库官方网站在项目的根目录下安装 element-ui 官方网页： 2、找到官方文档官方网站 3、安装 babel-plugin-component 在你的项目根目录下运行该：如： 4、修改 .babelrc 配置文件 vue-li 的 .babelrc 文件里为 babel.config.js 原来的 babel.config.js 文件: 修改后的 babel.config.j
2024年02月04日
浏览(12)
【element-ui】 steps自定义进度图标及完成等状态图标
因效果需要需自定义steps图标，找了很多回答，通过摸索结合尝试，终于搞懂如何替换图标 1.1 直接添加icon属性即可(最方便) 注意：此处需导入icon图标还需重写样式我这里改了图标大小，所以对应改了top属性效果如下： 1.2 使用插槽slot 此方法不如方法一方便不再展开描述
2024年01月21日
浏览(19)
element-ui 组件图标全变成方框解决方法
问题：element-ui中的icon都变成了框我的原因是在build下的webpack.base.conf.js中多了个woff元素去掉这个woff之后就可以了：我以为到此问题就解决了，但是当我打包后发现还是框框。。。。。解决办法:在build文件中找到utils.js 加上一行 publicPath：\\\'../../\\\' 就可以解决了
2024年02月13日
浏览(14)
给 element-ui 表格的表头添加icon图标
el-table icon图标的设置，使用 slot=\\\"header\\\" 插槽，然后直接通过设置类名为 el-icon-iconName 来使用即可。效果展示：
2024年02月16日
浏览(19)