vue 项目中使用icon font图标库

最新推荐文章于 2024-05-23 16:23:39 发布
最新推荐文章于 2024-05-23 16:23:39 发布
阅读量680 收藏
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdrtrr/article/details/106794211
版权
在icon font官网上有个账号

在这里插入图片描述
添加自己的图标到库
在这里插入图片描述
进入自己的项目
在这里插入图片描述
下载到本地
在这里插入图片描述

加入项目

解压、将以下文件拷贝到自己项目，自己项目建个assets/icon目录
在这里插入图片描述
在这里插入图片描述
在main.js中加入导入
在这里插入图片描述
在页面中使用
在这里插入图片描述
注：class可以从自己的icon font 项目中可以看到或从iconfont.css中看到
在这里插入图片描述
在这里插入图片描述

hdrtrr
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目引入icon图标
qq_49210750的博客
10-07 844
icon图标使用
vue中使用iconfont图标库
weixin_44635214的博客
07-09 439
阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用 创建SvgIcon组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export def
实现一个基于vue的简易icon库
糖糖小菜鸟前端er
07-18 751
实现一个通过页面批量上传svg源文件，进行转换后发布到npm仓库，前端按需引用，可以作为团队内部的一个icon库使用，ui在界面上上传，各个项目可以更新使用。
vue项目中如何使用iconfont
最新发布
qq_35227244的博客
05-23 1182
个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
Vue使用Iconfont图标库
Joey_Tribiani的博客
04-24 1513
Vue使用Iconfont图标库 创建vue项目 先基于Vue脚手架vue-cli搭建Vue2.x项目 vue create icontest 安装依赖并运行 // 安装 yarn (npm install) // 运行 yarn serve (npm run serve) 创建iconfont项目仓库 正在iconfont官网找到资源管理下拉菜单的我的项目选项，进去后点击加号创建项目 创建好项目后就可以尝试添加图标到项目 引入到前端项目 在刚刚创建好的vue项目中的/src/assets目录下
Vue项目使用iconfont图标库
青年码农
11-03 552
最近一直在更新Vue项目中配置及使用一些内置的方法，今天讲一讲Vue项目中使用iconfont图标库，不管是管理平台还是官网展示之类的显示页面，都会用到一些小图标，如果我们用img标签，那我们的资源库会非常的大，而且后期如果我们针对图标调整大小，改色等之类的操作，就需要用到Photoshop等专业类工具，上手困难不说，而且比较麻烦，下面就说下Vue使用iconfont图标...
vue element项目引入icon图标的方法
08-27
本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 Web 开发中，使用 Icon 图标可以减少页面...
Vue项目中如何引入icon图标
12-12
1.下载icon图标，推荐icomoon网站，里面有大量的矢量图标，也可以自定义，当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标。点击进入icomoon网站点击右上角“IcoMoon App”，找到自己需要的图标后选择然后...
让你在Vuepress中可以直接使用FontAwesome的图标
08-08
让你在Vuepress中可以直接使用Font Awesome的图标
如何在Vue.JS中使用图标组件
10-15
总的来说，Vue.js中使用图标组件的方式多样，可以根据项目需求和团队偏好灵活选择。无论选择哪种方式，确保图标组件的可维护性和用户体验是关键。在实际开发中，可能需要结合多种方法，以达到最佳的代码质量和用户...
vue使用Font Awesome的方法步骤
10-17
通过以上步骤，Vue项目就能成功集成Font Awesome图标库，并通过`vue-awesome`实现组件化的图标使用。这不仅可以简化代码，还能提高代码的可维护性和复用性。记得在实际开发中根据项目的具体需求进行调整，如优化图标...
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 下引入图标库
加油小伙子
08-12 1195
图标库的使用
vue 引入 icon(阿里图标库)
qq_28586135的博客
11-10 1996
vue 引入 icon(阿里图标库)
VUE项目使用阿里巴巴矢量图标库全解
梦可由天的博客
04-05 1374
文章目录进入[阿里巴巴矢量图标网站](https://www.iconfont.cn/)找到自己的项目在main.js中引入图标样式1. 线上使用方式1.1 替换资源引用链接，修改图标名称1.2 替换外链2. 本地离线使用方式2.1 下载资源2.2 替换资源引用链接，修改图标名称 进入阿里巴巴矢量图标网站找到自己的项目 点击要使用的项目后，如下图有两种使用方式（分别是1->离线使用和2-&g...
vue中使用iconfont阿里图标库（symbol本地环境）
qq_37291367的博客
05-27 817
vue中引入阿里图标库，symbol方式，个人便捷备份。
vue项目中使用iconfont阿里图标库
cjxIt的博客
08-17 862
5.在vue项目中 css新建一个文件夹 把 图4解压后的复制到css目录下 如下图。6.在vue入口mian.js中引入 图4的 iconfont.css 如下图。2.根据搜索选择自己想要的图片 添加到项目中或者新建项目 如下图。7.iconfont.css 里面的内容如下图。3.添加之后如下图 点击下载至本地。4.下载本地解压后的文件如下图。8.在vue各个组件中使用方法。1.进入icon 官网。
Vue项目中如何使用图标组件库
zxcvb0825的博客
01-27 1082
这是上一个如何使用SVG图标，自由的从图标库下载图标进行增删改等操作固然很方便，但是也暴露出一些小小的不足，那就是任意的图标使用可以造成图标风格的不统一，从而影响整个项目的用户体验。因为我们在进行图标下载的时候，有可能是从IconFont图标网站上，不同的图标项目库中进行分别的下载，如何堆积在当前自己的项目中，那么图标的大小，色彩，风格等样素可想而知也必然存在一定的差异。那么是否有一种方式可以解决该问题。IconFont图标组件库由此而诞生了。
vue 项目中使用阿里巴巴矢量图标库iconfont
山有木兮木有枝 心悦君兮君不知
08-17 2773
项目引入阿里巴巴矢量图标
vue项目中引入icon图标
05-06
使用第三方图标库：可以使用一些流行的第三方图标库，如Font Awesome、Material Design Icons等。首先需要在项目中安装相应的图标库，可以使用npm或yarn进行安装。然后，在需要使用图标的组件中，通过引入图标库的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值