vue项目中引入字体图标的所有步骤~(过程截图）

最新推荐文章于 2025-07-17 10:57:38 发布
最新推荐文章于 2025-07-17 10:57:38 发布
阅读量783 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42885734/article/details/116853214
本文详细介绍了如何在Vue项目中引入阿里矢量图标。首先在阿里图标库下载SVG文件，接着在Icomoon网站上传并生成字体图标，设置项目名和类前缀。最后将下载的资源引入项目，更新CSS样式，并在组件中使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、图标生成

（一）、先在阿里矢量图标库（https://www.iconfont.cn/）下载所需要的svg文件

在这里插入图片描述

（二）、把这些svg文件上传到https://icomoon.io/app/#/select

进入网站后，找到Import Icons按钮，点击进入，把svg文件导入。

在这里插入图片描述

选中想要的字体

在这里插入图片描述

生成图标字体

在这里插入图片描述
点击Preferences

在这里插入图片描述
Font Name中填入"(项目名)-icon",我的项目是一个外卖网站(sell)，所以用sell-icon.class Prefix中填入css的类选择器的前缀。例如：css中.icon-keyboard_arrow_right::before类选择器前面的前缀是icon。

在这里插入图片描述

点击DOWNLOAD

在这里插入图片描述

（三）、在项目中引入字体图标

把fonts里面的资源粘贴到项目中fonts目录，打开style.css文件，复制css源码，粘贴到项目中的
stylus目录的icon.stylus文件中。

在这里插入图片描述在这里插入图片描述

然后就可以在组件中导入样式了，注意我的icon.styl下面是icon.css文件。但是只需要引入icon.styl就行了

在这里插入图片描述

Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 1048
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue2.0和3.0引入阿里字体图标库的步骤
weixin_69043473的博客
10-15 443
vue2.0和vue3.0如何快速引入阿里字体图标库，保姆集教程。
VUE3项目中引入单色和彩色字体图标解决方案
m0_37873510的博客
05-31 1079
vue3项目下引入单色和彩色字体图标的用法
vue中引入字体图标的方法
南野子
08-23 1044
vue中引入字体图标的方法 引入图标后不必再把图片下载下来放到项目中，下面是我自己的操作步骤： 1.在阿里巴巴矢量图标库找好图标后，不点下载，点击购物车，添加至项目 2.若之前未添加过项目则手动新增项目，若添加过直接点击选择对应项目添加； 3.点击下载你至本地并解压 4.在自己项目中新建iconfont文件夹，将解压的文件夹中iconfont.css文件导入 5.在iconfont.css中把字体引入方式改为绝对路径 6.在main.js中引入样式 或在APP.vue中引入 7.需注意，每次新
VUE3外部字体导入
weixin_72336719的博客
05-15 439
【代码】VUE3外部字体导入。
在vue中引入字体图标库
qq_45674040的博客
01-25 605
1.下载阿里图标库 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^=“iconfont”], [class*=" iconfont"],(这一步是找到包含iconfont 或者以iconfont 开头的类名)同时替换font-family为iconfont(保持一致) 4. main.js引入字体图标(全局,也可局部引入使用) 5. 使用class类名方式使用字体图标即可 参考链接 https://www.cnblogs.c
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 4692
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
weixin_34314962的博客
04-18 701
　　iconfont字体图标使用就不多说了，大致是几部： 　　1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压 　　2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码 　　3、在main.js导入iconfont.css文件 import './assets/iconfont/iconfont.css' 　　4、在代码中使用class="ic...
vue中引用阿里字体图标的方法
08-28
引用阿里字体图标在 Vue 项目中是一件非常简单的事情，只需要正确地配置 Webpack 和引入阿里字体图标的 CSS 文件就可以了。如果您在使用阿里字体图标时遇到了错误问题，不要担心，只需要按照我们的步骤来解决问题就...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
在Vue中使用icon 字体图标的方法
12-02
在Vue项目中，使用图标是常见的需求，字体图标由于其加载速度快、支持多分辨率等优点，成为了一种常用的解决方案。本篇文章将详细介绍如何在Vue中使用阿里Iconfont图标库，以及两种不同的使用方法：在线引入和本地化...
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue 项目中如何引入 iconfont 字体图标
qq_36437172的博客
05-15 733
1.在Iconfont 官网选择要下载的图标，下载至本地。将下载的内容放在 assets 文件夹下。 2.在 main.js 文件中引入 iconfont.css 的样式 import '@/assets/fonts/iconfont.css'; 3.如何在 vue 中使用呢？ <i class="iconfont icon-zitigui-xianxing"></i> 4.如果报错，需要安装 css-loader 依赖包 npm install css-lo...
Vue项目中使用字体图标 带详细图解
taoCSD的博客
01-26 203
https://www.cnblogs.com/hahahakc/p/13025069.html
vue3项目 引入 iconfont字体图标
最新发布
👨‍💻 前端开发者 | 技术分享者
07-17 315
一、获取 Iconfont 资源文件1. **登录 Iconfont 官网**访问**阿里巴巴矢量图标库**并登录账号。2. **创建项目 & 添加图标**选择所需图标 → 点击「添加入库」进入「购物车」 → 点击「添加至项目」（选择已有项目或新建）3. **生成图标文件**在项目页面选择「Font class」方式 → 点击「生成链接」或「下载至本地」：- **在线链接**：复制格式的 CSS 链接- **本地文件**
vue3引用Font-Awesome字体图标库
键指江湖的博客
08-03 2236
介绍：这里安装引用的是Font-Awesome 6.x 版本，有专业版（付费），这里只介绍免费版字体使用方法。效果：此时看到同一个图标copy两种引用方式常规和实体的区别了吧。环境：vue3+ts+vite+element plus。4.使用 （看步骤3里面引用图标处）
基于vue2.x搭建组件库的流程-（四 ）-组件库中引入字体图标
weixin_42349568的博客
10-10 490
组件库中引入字体图标库。
vue项目中使用字体图标（iconfont）
云帆的博客
05-10 2716
前言 element-ui中的字体图标非常好用，那么如何在项目中使用自定义字体图标呢 步骤 进入iconfont官网，登录/注册一个账号； 搜索你想要的图标，并且加入到购物车； 顶部的购物车图标会显示当前库存数量，已入库的图标会显示虚线边框； 点击顶部购物车图标，在点击添加到项目； 如果还没有创建过项目，可以点击“+"按钮新增； 添加到项目后，进入项目详情； 一般选择font class模式，图标下方显示图标的font class名称； 进入项目设置，修改字
vue中 字体图标引入 - iconfont阿里字体图标库
weixin_42479421的博客
09-10 625
iconfont字体图标引入，fontclass方法
Vue项目中字体图标的使用指南
资源摘要信息: "在Vue项目中使用字体图标的方法和步骤" 在现代Web开发中，字体图标因其灵活、可缩放性和美观的特性而被广泛应用。字体图标不是通过传统的图像文件来展示，而是通过字体文件来显示，这使得图标的颜色...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值