vue-导入图标iconfont到项目中并使用

最新推荐文章于 2024-05-23 16:23:39 发布
最新推荐文章于 2024-05-23 16:23:39 发布
阅读量385 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52177571/article/details/131557792
版权

阿里巴巴矢量图标库官网：

打开官网-我的素材库

选中要导入的项目-点击下载

 

 下载好一个包

解压后得到

 

将这些文件全部复制到vue项目的src/assets/icon目录下

在main.js中导入

import '@/assets/icon/iconfont.css'

 即可使用

【示例】

在任意一个vue界面的<template>中写

<span class="iconfont icon-jubao2"></span>

 

 

大白百宝阁
关注
专栏目录
vue项目引入iconfont图标
eqizhihui的博客
10-07 2364
点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。
Vue项目中引用‘阿里巴巴字体图标库iconfont’
2401_84418948的博客
04-29 643
我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
Vue 项目中如何引入 iconfont 字体图标
qq_43787947的博客
08-24 436
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项目中引入iconfont
2401_84447149的博客
04-27 937
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
vue2 项目中引入iconfont
qq_37299479的博客
09-05 1448
vue iconfont
vue项目引入Iconfont图标库的教程图解
10-17
本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里图标库（Iconfont）网站，挑选你所需要的图标。在浏览图标时，你可以将需要的图标加入购物车。如果你在一个...
如何在Vue中引入iconfont
weixin_46285310的博客
08-06 4261
首先在了解了Vue的基础上，知道和一般的html代码里引入的方式会有所不同，那么如何引入呢 第一步：首先在某图标库里搜索你想要的图标 第二步：点击图标添加到购物车里如下图所示 第三步：点击右上角购物车，会出现一个列表我们这里选择添加到项目，如果没有，则再右下角新增一个项目 第四步：点击之后会跳转到项目里如图，这里我们选择Font class 如有特殊需要，点击项目设置，设置一些选项，这里有一个前缀可以设置，避免与你的vue项目里的css或者命名参生冲突 第五步：...
在uniapp、vue 中引入iconfont图标
weixin_48789376的博客
04-13 581
1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车 2、再将图标添加到项目中，没有项目的，可以先新建一个项目 3、将刚刚选的图标下载到本地 4、解压后，将需要的文件添加到项目中 5、复制以下代码，将iconfont.css中的内容替换 将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前： 替换后：再复制的内容连接前面要加上https 6、再在app.vue文件中引入样式 7、使用 <view class="iconfont icon
详解vue使用vue-layer-mobile组件实现toast，loading效果
10-18
通过本文的介绍，读者可以了解到如何在Vue项目中使用vue-layer-mobile组件库来创建便捷的UI交互效果，同时注意一些可能遇到的问题，并采取相应的解决措施。这对于提高用户交互体验和前端开发效率都非常有帮助。
vue前端项目引入iconfont阿里图标的四种方式
热门推荐
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
vue 引入 icon(阿里图标库)
qq_28586135的博客
11-10 2094
vue 引入 icon(阿里图标库)
iconfont小图标从下载到引入到vue项目中的详细教程
YY的博客
12-02 2047
iconfont小图标从下载到引入到vue项目中的详细教程
在vue2中在线使用字体图标iconfont-阿里巴巴矢量图标库
欢迎来到长风沛雨的博客
05-16 564
在Vue2里面在线使用阿里巴巴字体图标
vue项目中引入iconfont，初学者必看
2401_84097427的博客
04-04 1751
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。
Vue引入阿里妈妈iconfont图标
2301_76662406的博客
05-05 1528
此外，index.html 中通过 标签引入了 Vue 应用程序的 JavaScript 文件（app.js），它包含了 Vue 组件和应用逻辑的代码。ESLint 是一个用于在 JavaScript 代码中进行静态代码分析和检查的工具，它可以帮助开发人员发现和修复潜在的问题、统一代码风格，并遵循预定义的规则和最佳实践。.eslintrc.js 文件用于配置 ESLint 的规则和选项。在 ESLint 的配置中，有两个重要的文件：.eslintignore 和 .eslintrc.js。
vue 项目里面使用iconfont 字体图标
qq_57325395的博客
08-21 175
把下载好的 文件放到 public 或者src 的assets。在index.html 里面引用。阿里巴巴图标库官网下载 图标。​下载好 成压缩文件解压。
vue项目中如何使用iconfont
最新发布
qq_35227244的博客
05-23 2013
个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
在原有的项目上添加新的iconfont图标
weixin_46112174的博客
05-17 1698
在原有的项目上添加新的iconfont图标,超详细步骤~
Vue项目集成Iconfont图标库详细步骤
"Vue项目中引入Iconfont图标库的...通过以上步骤，你就可以成功地在Vue项目中引入并使用自定义的Iconfont图标库了。这种方法不仅方便管理图标，还能提高项目的可维护性。如果有任何疑问，欢迎提问，我会随时为你解答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值