本地引入vue、element-ui引入fonts，icon图标不生效问题

最新推荐文章于 2023-03-31 17:19:30 发布
最新推荐文章于 2023-03-31 17:19:30 发布
阅读量5.1k 收藏 2
点赞数 4
分类专栏： element-ui 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roongyan92/article/details/107335273
版权

按官方文档，提供了cdn引入和npm安装的方式，但是呢，在网络很差，或没网的的情况下就加载不出来，直接报错啦

我们在本地下载需要的版本文件，直接引入js和css，但是icon图标不显示

修改css中字体图标的路径，发现icon图标还是无法加载

网上资料中的各种办法都不奏效呢，这时候你需要npm安装一下element-ui，然后从他的目录里面把fonts复制出来替换你当前的，就OK啦

roongyan92
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue-i18n结合Element-ui的配置方法
10-16
主要介绍了vue-i18n结合Element-ui的配置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue element-ui离线包2.14.1
12-16
完整的element-ui离线包，版本2.14.1，直接可用；如不想使用积分下载，可用链接中的方式自行下载：https://blog.csdn.net/ttphoon/article/details/104653785
elementui本地引入icon图标不显示问题
weixin_68729379的博客
09-19 2064
本地引入elementui时，icon图标不显示问题
Element UI——本地引入iconfont不显示
weixin_30507269的博客
04-12 3009
前言 前面因为本地引入Element UI导致了iconfont不显示，所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台，找到Application-->Frames-->Stylesheets-->docs.xxx.css-->@font-face中的src直接复制 ...
【VUE】vue引入iconfont不显示
SZnAl的博客
03-03 2907
引入在线iconfont后页面显示方块 解决方法：在app.vue中引入css样式与在线地址后 在要引入iconfont的页面中，引入iconfont的地方，比如在div里放入iconfont代码，给div添加class：class="iconfont"
vue引入iconfont阿里字体图标库报错和解决
weixin_47553901的博客
07-14 1594
解决：在引入的字体iconfont.css中加入绝对路径 内容：如图
uniapp引入iconfont无效的解决
weixin_46732970的博客
10-11 1333
uniapp引入iconfont
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...
VUE element-ui响应式步骤进度条样式代码
06-11
几款简单的基于VUE element-ui响应式步骤进度条样式代码，active往里传值即可显示步骤。
vue3Element Plus中icon图标不显示问题的解决
ddf__的博客
11-13 6226
根据Element Plus官方文档给出的教程以及实践操作，解决办法如下。在vue组件中使用了Element Plus中icon图标。方法想要显示图标，程序能运行但在浏览器中图标无法显示。
解决 element ui 本地使用 引入 图标不显示 .ttf和.woff 报错问题
书山有路勤为径，学海无涯苦作舟
03-31 4090
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题。讲上图标记处位置修改为下图所示 修改找到对应文件的路径 完成即可。这里我是把 .ttf和.woff两个文件 放入了 css 文件夹内。根据控制台提示 发现少了.ttf和.woff两个文件。内的 .ttf和.woff两个文件的引入地址。下载完毕后放入文件夹内后修改。原因 因为文件内缺少两个文件。
HTML文件通过cdn引入element-ui组件样式不显示问题
潮汐未见潮落的博客
06-05 4345
html页面通过cdn引入element组件不显示的问题及两种解决方法
vue使用中icon图标失效问题（已解决）
weixin_50433115的博客
12-17 2852
这是因为从ElementPlus@1.20起icon包改名了，站在要用import {图标名字} from '@element-plus/icons-vue'
非网络引用element-ui css导致图标无法正常显示的解决办法
热门推荐
物联网三分钟
03-06 4万+
前言 官方推荐的css及js引用方式如下: <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/ele...
Element UI本地引用及图标显示异常问题
Korbin的博客
01-16 3697
本地引用 按照官方的推荐引用方式是： <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-...
elementUI自定义字体图标
若末lan的博客
02-26 1万+
上一篇《ionic（mui、elementUI）自定义字体图标》写一部分了。重要的点，再强调一下下。在阿里妈妈上的项目中编辑相关属性：elementUI 的前缀是el-icon,Font Family是element-icons；然后下载下来的代码就不需要怎么改了，和ionic图标有所区别的是：ionic的图标有3套，分别对应于iOS和安卓以及windows，所以它的css字体图标要添加相关适配，...
Vue项目中使用element-ui，并引入第三方图标库iconfont
sleepwalker_1992的专栏
09-23 2万+
element-ui官网 1、安装 npm install element-ui --save-dev 2、在main.js文件中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3、上面两步完成后，就可以在项目任意的组件中...
vue element-ui icon
最新发布
08-18
Vue Element-UI 提供了一套丰富的图标库，可以通过使用 `<el-icon>` 组件来展示这些图标。以下是一些常用的图标示例： 1. 使用 Element-UI 默认图标库： ```html <el-icon name="el-icon-edit"></el-icon> ``` 2. 使用 Font Awesome 图标库： 首先，你需要安装 Font Awesome： ```bash npm install @fortawesome/fontawesome-free -S ``` 然后在 Vue 项目中引入： ```js // 在 main.js 中引入 import '@fortawesome/fontawesome-free/css/all.css' ``` 最后，在模板中使用 Font Awesome 图标： ```html <el-icon class="fa" :class="['fa-icon-name']"></el-icon> ``` 3. 使用自定义 SVG 图标： 首先，将你的 SVG 图标文件放置在 `src/assets/icons` 目录下。 然后，在 `main.js` 中引入并注册自定义 SVG 图标组件： ```js import Vue from 'vue'; import IconSvg from '@/components/IconSvg.vue'; Vue.component('icon-svg', IconSvg); ``` 最后，在模板中使用自定义 SVG 图标： ```html <icon-svg class="custom-icon" name="icon-file"></icon-svg> ``` 以上是几种常用的方式来使用图标。你可以根据项目需求选择适合的方法来展示图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值