VUE_elementUI 图标字体无法正常显示 本地CDN文件

最新推荐文章于 2024-04-30 17:50:44 发布
最新推荐文章于 2024-04-30 17:50:44 发布
阅读量953 收藏 2
点赞数
分类专栏： # VUE 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44599931/article/details/120002100
版权

本地CDN引入使用elementUI 图标字体无法正常显示

  • 查看element-icons.woff element-icons.ttf 这两个字体图标库文件找不到
  • 控制台报错提示，当前文件夹下的fonts文件下找不到element-icons.woff和element-icons.ttf两个文件
  • element：项目根目录
    element-icons.woff element-icons.ttf下载地址：
    在这里插入图片描述

解决方法：

根据报错在项目根目录下创建fonts文件，把element-icons.woff和element-icons.ttf两个文件放里面
在这里插入图片描述

在这里插入图片描述

完美解决：

在这里插入图片描述

小歪 | 前端
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非前后端分离，引入 ElementUI 方法
carryman66的博客
08-07 3105
本地其他项目，引入 ElementUI 方法 1. 下载文件 vue.js element.js element.css element-icons.ttf element-icons.woff 目前，比较流行使用npm管理、安装，开发前后端分离项目，但是这次需要本地其他项目引用，所以需要去特定位置下载，对应资源文件 vue 在官网即可下载，选择压缩与否都可以 element 资源下载 打开 https://unpkg.com/browse/element-ui@2.11.1/ 这里版本自己选择，我选择的
element.zip
05-25
普通H5项目引入Element UI所需依赖 element-ui-index.css element-ui-index.js element-icons.ttf element-icons.woff
element-ui图标名称集合
最新发布
m0_73363632的博客
04-30 1501
element-ui图标名称集合
element ui icon文件下载
梁诗傑的博客
01-22 7142
去这个地址查看可下载的版本： https://unpkg.com/browse/element-ui@2.5.4/ 修改@2.5.4下载对应版本的icon https://unpkg.com/element-ui@2.5.4/lib/theme-chalk/fonts/element-icons.woff https://unpkg.com/element-ui@2.5.4/lib/theme-chalk/fonts/element-icons.ttf 参考来源:https://ww...
解决 element ui 本地使用 引入 图标不显示 .ttf和.woff 报错问题
书山有路勤为径，学海无涯苦作舟
03-31 4263
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题。讲上图标记处位置修改为下图所示 修改找到对应文件的路径 完成即可。这里我是把 .ttf和.woff两个文件 放入了 css 文件夹内。根据控制台提示 发现少了.ttf和.woff两个文件。内的 .ttf和.woff两个文件的引入地址。下载完毕后放入文件夹内后修改。原因 因为文件内缺少两个文件。
下载element-ui 资源，图标 element-icons.woff，element-icons.ttf 无法解码文件字体
weixin_51689532的博客
02-29 1362
下载element-ui 资源，图标 element-icons.woff，element-icons.ttf 无法解码文件字体
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue_ElementUI-ING-2021_01:Vue＆ElementUI
03-08
Vue_ElementUI 1_vue简介 2_第1个vue应用程序 3_vue实例对象和生命周期 4_vue生命周期 5_vue模板 6_计算属性 7_v-for渲染 8_摘要更新检测 9_条件渲染 10_事件处理 11_事件对象 12_表单处理 13_实战练习1 14_实战...
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
主要介绍了vue+elementUi 实现密码显示/隐藏+小图标变化功能,需本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue_ElementUI_shop:基于vue+ElementUI，一个电商demo，调用外部接口
04-14
Vue.js和ElementUI是当前前端开发中非常流行的组合，它们为构建用户界面提供了强大的工具。在"vue_ElementUI_shop"这个项目中，我们看到的是一个基于Vue.js和ElementUI搭建的电商Demo，它还调用了外部接口来实现更多...
element-icons.woff
09-01
element-icons.woff
老旧项目手动引入element-ui资源包
03-03
1、element-ui资源包 2、适合老旧项目手动引入
vue+elementUI 框架模板
05-06
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
离线使用Element UI和Vue
qq_42416602的博客
01-31 698
链接：https://pan.baidu.com/s/1nGOi0Vm_xExRGmVp6oVLoA。5.element-icons.woff(Element UI图标)4.element-icons.ttf(Element UI字体)
element准备工作-图标库引入
星银色飞行船的博客
11-01 872
github下载elementui 下载完毕后，图标库所在位置 element-dev\packages\theme-chalk\src\fonts 将字体文件放到本地项目的fonts文件夹下。 http://localhost:/element/element-2.15.6/fonts/element-icons.woff 即可使用element的图标 ...
vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
09-25 2188
vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题
elementui生产环境图标加载时偶而乱码
热门推荐
palmer_kai的博客
04-24 2万+
elementui 打包后图标加载偶尔会乱码preface错误现象猜想解决方案1. 官网的 node-sass2. 我本地的 是 dart-sass3. 查看了 打包后的css 文件4. 卸载 dart-sass5. 打包后的 css preface 最近在 使用element UI 写项目， 项目在生产环境运行了一段时间后，页面刷新偶尔会出现 （搜索，箭头。。。）各种图标乱码情况。 使用的是 ...
vue使用elementui字体
10-17
要在Vue中使用ElementUI的字体，需要在项目中引入ElementUI的CSS文件。具体步骤如下： 1. 安装ElementUI ``` npm install element-ui -S ``` 2. 在main.js中引入ElementUI ```javascript import Vue from 'vue';...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值