Vue使用Iconfont图标库

最新推荐文章于 2025-10-11 11:50:45 发布
原创 最新推荐文章于 2025-10-11 11:50:45 发布 · 1.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue #iconfont #js

本文介绍了如何在Vue2.x项目中使用Iconfont图标库。首先，通过vue-cli搭建项目，然后安装并运行项目。接着，在Iconfont官网创建图标项目，并将图标下载到项目中的/src/assets/icon目录。导入iconfont.css到main.js中，最后在组件中通过i标签引用图标，调整颜色和大小以展示。

Vue使用Iconfont图标库

创建vue项目

先基于Vue脚手架vue-cli搭建Vue2.x项目

vue create icontest

安装依赖并运行

// 安装
yarn (npm install)
// 运行
yarn serve (npm run serve)

创建iconfont项目仓库

正在iconfont官网找到资源管理下拉菜单的我的项目选项，进去后点击加号创建项目

在这里插入图片描述

创建好项目后就可以尝试添加图标到项目

最低0.47元/天 解锁文章
Vue引入使用iconfont字体图标
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
08-08 1307
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
『VUE』vue 引入Font Awesome图标库（详细图文注释）
MZH
03-11 863
我一般是中文网搜索找到图标的英文名然后去官方网站搜索官方网站(英文名搜索)中文搜索图标大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！发现你走远了@mzh原创作品，转载必须标注原文链接欢迎关注『VUE』 专栏，持续更新中欢迎关注『VUE』 专栏，持续更新中『未完待续』
实现一个基于vue的简易icon库
糖糖小菜鸟前端er
07-18 879
实现一个通过页面批量上传svg源文件，进行转换后发布到npm仓库，前端按需引用，可以作为团队内部的一个icon库使用，ui在界面上上传，各个项目可以更新使用。
Vue3 本地 SVG 图标库实现
油墨香^-^的博客
10-11 450
本文介绍了一个基于Vue3的本地SVG图标库实现方案。主要内容包括：1) 创建可复用的SvgIcon组件，支持自定义尺寸和颜色；2) 构建图标库展示页面，实现网格布局展示；3) 添加搜索和分类筛选功能；4) 提供图标使用示例和代码片段。实现步骤包括创建组件、整合SVG图标、全局注册组件和构建管理界面。该方案提供了一套完整的本地SVG图标管理解决方案，便于在项目中使用和预览图标。
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue项目中引用iconfont图标库图标
lang_xw的博客
10-18 867
4、到需要使用的项目中，找到index.html文件，加入如下代码，href内容为刚刚复制的代码。2、点开购物车图标，将新加入库的图标添加至项目，没有项目就新建一个项目。3、选择Font class，点击生成代码，复制生成的代码。6、设置大小/颜色等样式可通过直接修改样式来调整。，找到需要的图标，添加入库。
Vue项目引入icon图标(阿里巴巴矢量图标库)
weixin_59528719的博客
02-28 1932
当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是引入图标步骤。
vue项目引入Iconfont图标库的图解教程
最新发布
11-18
本文将详细指导您如何将Iconfont图标库成功整合到您的Vue项目中，以实现自定义图标的需求。 首先，请访问阿里图标库（Iconfont）官方网站，浏览并选择所需的具体图标。 在挑选过程中，您可以将选定的图标加入购物车...
vue中使用iconfont图标库
weixin_44635214的博客
07-09 538
阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用 创建SvgIcon组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export def
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 5093
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
vue 引入 icon(阿里图标库)
qq_28586135的博客
11-10 2222
vue 引入 icon(阿里图标库)
vue icon 图标库
zyx的博客
11-09 8721
http://www.iconfont.cn/
在vue项目中引入阿里图标库小记
weixin_30254435的博客
08-10 272
使用Vue技术栈开发不仅效率高，而且很友好，而且还有很多基于vue的UI框架，例如：element等，但是这类框架美中不足的是，图标太少。为了解决这个问题，不得不引入第三方字体库，今天以阿里图标库为例，如何在vue中使用。 1、首先找到合适图标，然后点击添加入库，接着点击右上角的购物车图标。 2、你刚才选择的图标就能在侧边栏看到了，选择要加入的项目（提前建好的项目），点击确定。 ...
vue中使用iconfont阿里图标库（symbol本地环境）
qq_37291367的博客
05-27 1043
vue中引入阿里图标库，symbol方式，个人便捷备份。
vue 使用iconfont图库
Mr. Ding的小博客
01-13 3693
项目中如何使用iconfont（阿里图标库） 一. 登陆iconfont官网： https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击“图标管理”子目录中的子目录“我的项目”，进入个人图标项目 2. 点击创建一个图标项目 三. 将需要的项目加入到购物车中 搜索需要的图标 选择图标，点击加入至购物车 四. 将购物车中的图标加入至所创建的图标项目中 点击购物车，进入查看所添加的图标 2.点击添加至项目 ...
Vue项目使用iconfont图标库
青年码农
11-03 649
最近一直在更新Vue项目中配置及使用一些内置的方法，今天讲一讲Vue项目中使用iconfont图标库，不管是管理平台还是官网展示之类的显示页面，都会用到一些小图标，如果我们用img标签，那我们的资源库会非常的大，而且后期如果我们针对图标调整大小，改色等之类的操作，就需要用到Photoshop等专业类工具，上手困难不说，而且比较麻烦，下面就说下Vue使用iconfont图标...
vue项目中引入字体图标库（傻瓜式教程，详解）
逆水行舟 不进则退
04-02 5074
在vue项目中使用字体图标库，完整版详细步骤
vue 项目中使用icon font图标库
hdrtrr的博客
06-16 836
在icon font官网上有个账号 添加自己的图标到库 进入自己的项目 下载到本地 加入项目 解压、将以下文件拷贝到自己项目，自己项目建个assets/icon目录 在main.js中加入导入 在页面中使用 注：class可以从自己的icon font 项目中可以看到或从iconfont.css中看到 ...
vue项目引入Iconfont图标库
weixin_30388677的博客
10-23 605
在进行项目开发过程中,vue项目中前端所使用的UI框架是element ui,但是element的字体图标库不足以满足日常开发的需要,或者公司项目要求使用本公司ui设计的图标,都可以参考以下的步骤, 1. 在阿里图标库中选中你想要的图标库,并点击进去, 2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值