VUE中iconfont的使用

最新推荐文章于 2025-08-22 11:51:13 发布
最新推荐文章于 2025-08-22 11:51:13 发布
阅读量472 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： iconfont VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alaAicy/article/details/107536224
本文详细介绍了在VUE项目中如何使用iconfont图标，包括从官网选择图标、下载并整合到项目的过程，以及在页面上正确显示图标的步骤。

VUE中iconfont的使用

  • 首先进入iconfont的官网，点击图标库在这里插入图片描述

  • 进入图标库后任意选择你需要的图标加入购物车中
    在这里插入图片描述

  • 在右上角找到购物车后点击添加至项目，然后加入到你的项目中去，再点击确定
    -在这里插入图片描述

  • 接着进入你的项目，把刚刚加入项目的图标下载下来
    在这里插入图片描述

  • 找到刚刚下载下来的文件，解压缩
    在这里插入图片描述

  • 接下来进入你的项目，在src->assets->css中创建一个文件夹叫做iconfont，然后把刚刚解压出来的文件中的这四个文件放到新建的iconfont文件夹中，把 刚刚解压出来的文件中的iconfont.css放到项目的src->assets->css中在这里插入图片描述

  • 在项目中打开iconfont.css这个文件然后在这些url的地址前都加入文件夹地址（除了data:application/x-font-woff2;charset=utf-8;base64这个url）
    在这里插入图片描述

  • 接下来就要引入iconfont了，在main.js中引入iconfont.css

在这里插入图片描述

  • 如何在页面上使用iconfont呢？首先去刚刚iconfont的官网找到你想用的iconfont，鼠标移到上面点击复制代码
    在这里插入图片描述

  • 接下来找到你想用iconfont的位置，然后在这个位置加上
    <span class="iconfont">&#xe7ae;</span>
    在这个地方需要注意， class="iconfont"这个是必须要加上的，曾经我因为这个问题找了很久的错误，不要忘记一定要加上这个 class=“iconfont”

  • 好了，这个时候就完成了iconfont的使用，结束！

vue中使用iconfont
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-04 237
<template> <div class="header"> <div class="header-left"> <div class="iconfont back-icon">&#xe624;</div> </div> <div class="header-input...
Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 1212
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue项目中如何使用iconfont
qq_35227244的博客
05-23 3271
个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
在vue项目中正确使用iconfont的方法
10-17
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目中高效使用Iconfont的最佳实践指南
最新发布
weixin_42603332的博客
08-22 802
在实现动态加载图标的过程中，有几种主流的方法：图标库的更新需要系统化地执行，步骤如下：需求分析：分析项目需求，确定需要添加或更新的图标类型。设计和制作新图标：根据需求，设计和制作新的图标资产。图标优化：对新图标进行优化处理，比如减小文件大小、提高渲染性能。集成和测试：将新图标集成到项目中，并进行全面测试，确保兼容性和功能性。文档更新：更新图标库文档，包括图标的新特性、使用指南和变更日志。部署和分发。
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 8045
Vue 中 iconfont 使用
vue项目使用iconfont的最佳实践
08-12
在Vue.js项目中，有效地使用Iconfont是一种提升用户体验和优化前端性能的重要方法。Iconfont，又称图标字体，是一种将矢量图标转化为Web字体的方式，它允许开发者通过CSS样式来控制图标的大小、颜色和动画效果，同时...
vue中iconfont的几种使用方式详解
jjw_zyfx的博客
03-31 959
vue中iconfont的几种使用方式详解
vue如何使用iconfont
qq_35669498的博客
06-05 1472
vue如何使用iconfont
Vue 使用iconfont
as_64的博客
02-08 595
1.找到要使用的图标，然后添加入库 2.点击右上角的购物车，添加至项目（若没有则新建一个） 3.在个人中心找到我的项目，选择fontclass，点击生成代码 4.复制代码到Vue项目的css文件中，并在main.js中声明 5.使用示例如下，将class加上你要使用的图标名，其中iconfont是必加的,icon-zhuzhuangtu是图标名 <i class="iconfont icon-zhuzhuangtu"></i> ...
在vue项目中使用iconfont
LeeBrook0的博客
04-12 276
百度搜索iconfont，去官网创建项目 在我的项目里面新建项目 项目创建完成后去图标库添加图标至购物车 点击右上角的购物车图标，把购物车内图标添加至项目 在回到我的项目，把图标下载到本地，解压文件 在解压文件夹中把所有的字体文件和iconfont.css拷贝至项目中，此处需要注意字体文件和iconfont.css的位置关系，因为css引用字体文件时是相对路径 项目中文件和引用路径要一一对牢 项目中使用，首先在main.js中全局引入iconfont..
vue使用iconfont
shykevin的博客
05-26 280
一、概述 国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具 官方链接：https://www.iconfont.cn/ 二、使用 官方使用文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=c...
jQuery概述，架构师必备技能
2401_84094725的博客
04-04 532
去jquery官网下载jquery代码，在项目中新建jquery.min.js文件，将在jquery官网得道的jquery代码复制到jquery.min.js文件中。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！2.6、JQuery对象和DOM对象的转换。2.5、JQuery对象和DOM对象。2.4、jQuery的顶级对象。
vue项目使用iconfont（本地下载、彩色icon）
weixin_41292470的博客
08-13 2275
1.下载至本地 1.下载iconfont文件，包含iconfont.ttf、iconfont.css 2.iconfont.ttf 文件 转base64 3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置 @font-face { font-family: "iconfont"; src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) form
【vue-iconfont的使用】
weixin_47416539的博客
04-04 875
vue-iconfont的使用 使用步骤如下： 选好图标之后点击fontclass并生成在线代码，点击复制此代码。 在public里面index.html <link href="http://复制的代码></link> 用法: <span class="iconfont 选中的图标类名"></span> ...
vue项目使用iconfont教程
very__good_的博客
09-21 527
vue引用iconfont使用教程
vue 项目iconfont使用为空白
03-19
### Vue 项目中 Iconfont 图标显示空白的原因分析 在 Vue 项目中，如果 Iconfont 图标无法正常显示而呈现为空白状态，可能由以下几个原因引起： #### 1. **CSS 文件未正确引入** 如果项目的 `index.html` 或者全局 CSS 文件中没有正确引入 Iconfont 的样式文件，则可能导致图标类名找不到对应的字体定义。这通常是因为缺少以下代码片段： ```html <link rel="stylesheet" href="//at.alicdn.com/t/font_XXXXXX.css"> ``` 这里的 URL 是从阿里云 Iconfont 平台下载的自动生成链接[^1]。 #### 2. **网络请求失败** 若 Iconfont 的 CSS 文件托管于外部 CDN，在生产环境中可能会因为跨域或者网络问题导致资源加载失败。此时可以通过浏览器开发者工具中的 Network 面板查看是否存在 HTTP 请求错误或超时情况。 #### 3. **HTML 结构书写不规范** 正确使用 Iconfont 图标的 HTML 标签应如下所示： ```html <i class="iconfont icon-weixin"></i> ``` 如果遗漏了 `class="iconfont"` 或具体的图标配对名称（如 `icon-weixin`），则不会渲染出任何图形内容[^2]。 #### 4. **打包配置冲突** 在某些情况下，Webpack 打包过程中会对静态资源路径进行修改，从而破坏原本指向远程服务器上的字体文件地址。这种情形尤其容易发生在切换环境变量之后忘记同步调整公共资源前缀的情况下[^3]。 --- ### 解决方案 针对上述提到的各种可能性提供相应的修复措施如下： #### 方法一：确认并修正 CSS 路径导入方式 确保在入口级组件 (App.vue) 中显式声明所需依赖项；如果是本地存储形式而非在线调用的话记得复制整个目录到 src/assets 下再做相应更改即可完成迁移工作流程优化目标达成效果更好一些哦！ ```javascript import '@/assets/css/iconfont.css'; // 假设已将 css 放入此位置 ``` #### 方法二：检查网路状况排除异常因素干扰 利用 Chrome 浏览器自带调试功能定位具体哪一步骤出现问题进而采取针对性手段加以改进直至恢复正常为止才行呢朋友们加油吧! 打开 F12 -> 切换至 Networks Tab 查看对应 request 是否成功返回 status code 200. #### 方法三：验证模板语法准确性无误后再提交测试运行一遍看看有没有改善迹象呀😊 严格按照官方文档给出的标准格式编写相关部分就不会轻易犯错了不是吗？所以请务必仔细核对你所使用的每一处地方是否有偏差存在哟~比如下面这个例子就是完全按照推荐做法来的啦: ```vue <template> <div> <!-- 微信分享按钮 --> <span><i class="iconfont icon-weixin"></i></span> </div> </template> <script> export default { } </script> <style scoped lang='scss'> @import "../assets/css/iconfont"; /* 自己的实际路径 */ </style> ``` #### 方法四：适当调整 Webpack 构建选项参数设定值范围大小以便适应不同场景需求变化趋势发展规律特征表现形态等方面考虑周全一点会比较好些哈😄 对于那些经常遇到类似困扰的朋友来说不妨试试看把 publicPath 设置成 '/' 来解决问题如何?当然具体情况还得视实际项目架构布局安排再来决定最佳实践策略才是明智之举啊各位小伙伴们都懂滴😏 编辑 vue.config.js 添加以下字段: ```javascript module.exports = { ... publicPath:'/' }; ``` --- ### 总结 综上所述，当面对 Vue 项目里 Iconfont 图标展示不出来的情况时可以从多个角度出发逐一排查直到找到根本症结所在然后施加有效对策予以彻底根除隐患风险保障系统稳定高效运转下去才好嘛😉 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值