vue项目引入iconfont图标

已于 2023-10-20 15:40:42 修改
阅读量2.2k 收藏 2
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-10-07 18:50:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eqizhihui/article/details/133650223
版权

前提：由于Vant、elementui等组件库提供的图标有限，不满足页面展示要求，所以需要寻找其他图标用于页面展示，此处总结如何引入第三方图标（阿里矢量图库）且集成项目使用的组件库

步骤一：在图标库中找到用得上的图标，点击添加入库（加入购物车）

点击右上角的购物车图标，就能看到你加入的图标

点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可

步骤二：新建项目

1.若直接新建，则只需要输入项目名即可

最低0.47元/天 解锁文章
e企智汇
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue项目中引入iconfont，初学者必看
2401_84097427的博客
04-04 1625
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。
vue项目使用iconfont的最佳实践
08-12
在Vue项目中，创建一个名为`Icon`的组件，接收`name`属性来决定显示哪个图标，并在组件内部处理图标引入逻辑。 7. **适配响应式** Iconfont的图标是基于字体的，因此天生支持响应式。通过CSS的`font-size`调整图标...
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 2455
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
用vue把iconfont阿里巴巴的图标封装成组件（可该颜色、大小、增加css动画等样式）
最新发布
qq_68155756的博客
05-30 557
一般来说iconfont图标库是下载图片作为icon，这样对编码来说就有些局限性，比如不能图片的颜色，css动画等等，我们来把iconfont的图标库封装成组件就可以实现： 1. 在components文件夹下创建个空的myIcon.vue文件： 2. 在iconfont-阿里巴巴矢量图标库中找到适合自己项目的icon，我随便找了一个，然后不下载图片，点击复制svg代码： ......... 以上是更改颜色，除此之外还可以把myIcon完全当做组件来用，比如增加css的animation动画：
vue项目中如何使用iconfont
qq_35227244的博客
05-23 1317
个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
Vue - 项目中使用iconfont（阿里图标库）
热门推荐
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
iconfont小图标从下载到引入到vue项目中的详细教程
YY的博客
12-02 1951
iconfont小图标从下载到引入到vue项目中的详细教程
vue 使用iconfont图库
Mr. Ding的小博客
01-13 3401
项目中如何使用iconfont（阿里图标库） 一. 登陆iconfont官网： https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击“图标管理”子目录中的子目录“我的项目”，进入个人图标项目 2. 点击创建一个图标项目 三. 将需要的项目加入到购物车中 搜索需要的图标 选择图标，点击加入至购物车 四. 将购物车中的图标加入至所创建的图标项目中 点击购物车，进入查看所添加的图标 2.点击添加至项目 ...
Vue3如何引入iconfont
HaushoLin的博客
12-02 2726
本次采用的免费字体图标是iconfont。
在vue、element-ui项目中使用iconfont
CH_Y的博客
10-25 490
在vue、element-ui项目中使用iconfont一、iconfont是什么？二、使用步骤1.访问iconfont网页2.下载图标3.打包4.使用5.举例 一、iconfont是什么？ iconfont是用字体文件取代图片文件，来展示图标、特殊字体等元素的阿里巴巴MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 二、使用步骤 1.访问iconfont网页 链接: https:/
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
vue3 iconify 图标几种使用 并加载本地 svg 图标
weixin_43512977的博客
11-22 2706
vue3 iconify 图标几种使用 并加载本地 svg 图标
Vue如何使用iconfont（阿里图标库）
weixin_48398799的博客
08-29 6019
1、在iconfont上任意方式登录 2、选择图标管理下，我的项目 3、新建一个项目（如果已有项目可忽略） 4、创建好之后就可以找自己要用的图标，添加到自己的项目里 5、图标添加完毕后，再次回到我的项目里就可以看到自己的图标了 6、选择下载至本地，解压之后可以看到这些文件 7、把选中的文件（其他的可以不用）放到自己项目所需要的文件夹下 8、然后在main.js中全局引入对应的css文件 // 阿里图标库 import "@/assets/iconfont/iconfont.css"; 9
手把手教你 iconfont 导入使用及相关配置
Brod-Roy的博客
12-12 8731
iconfont是阿里旗下的一套图标库，UI设计师设计号图标后，会将图标上传到iconfont的项目库中。前端开发人员需要下载项目图标，并在项目中使用。
【CSS】阿里iconfont的使用方法（另附font-family引入方法）
weixin_42771853的博客
12-21 9832
介绍在 CSS 中引入阿里 iconfont 图标的方法（另附通过font-family引入的方法，无需声明class）
vue 下引入图标库
加油小伙子
08-12 1206
图标库的使用
vue3 动态加载el-icon图标
周家大小姐
05-28 9354
安装插件 cnpm install @element-plus/icons main.js引入 import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import { store, key } from './store/index' import ElementPlus from 'element-plus' import 'element-plus/dis
vue项目中如何使用阿里 iconfont图标
IT博客技术分享
05-27 459
先登录阿里 iconfont 图标库：https://www.iconfont.cn/ 1、选择需要的图标添加到购物车中 2、在资源管理里面 ——我的项目： 添加新项目 这样的话就会永久保存了。 3. 建好了之后， 低价购物车，把所有图标添加到对应的项目里面。 4. 然后打开我i的项目，点击下载： 5. 双击 demo_index.html 本地打开预览： 我这里采用的是 class <i class="iconfont icon-yonghuming"&g...
vue2引入iconfont
09-05
5. 在Vue组件中，可以使用以下方式引入iconfont图标： ```html <i class="iconfont icon-图标名称"> ``` 其中，icon-图标名称表示你在购物车中选择的图标的类名。 这样就可以成功在Vue2中引入iconfont图标了。记得...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值