在vue中引入阿里的icon图标

最新推荐文章于 2024-06-03 21:58:46 发布
原创 最新推荐文章于 2024-06-03 21:58:46 发布 · 454 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #icon #iconfont

本文详细介绍了如何在Vue项目中引入并使用阿里的字体图标。从下载图标到本地，解压并放置到项目中，再到全局引入iconfont.css，最后在组件中使用字体图标，步骤清晰明了。

在vue中引入阿里的字体图标

  1. 进入iconfont 的官网，下载需要的图标到本地（也可以用链接的，需要在index.html中link引入）

  2. 解压之后，将iconfont.css 和字体文件放到项目中（不清楚的就都放进去，之前只放.css和tff格式的 踩了坑）

  3. 全局引入iconfont.css，在main.js中引入
    import ‘./assets/iconfont/iconfont.css’

  4. 在组件中使用阿里的字体图标



我是如何在开源系统中（Vue）中引入阿里巴巴Icon图标的？
编码人生
04-25 1858
开始的背景是这样的，我们的系统是vue+elementui写的，直到在写一个博客的点赞的时候发现elementui并不能满足我们的需求，这是他自带的图标： 于是我们就做成了以下的样子： 这是使用了阿里的icon库之后的图标： 是不是好看很多，好了接下来教大家怎么在vue项目中引用 第一步，进去官网 第二步，选择自己喜欢的图标，加入购物车（免费） 第三步，进入购物车 第四步，添加至项目 第五步，下载代码 第六步，导入到vue项目中 将下载下来的所有文件放在vue项目中的icon文件夹下面.
VUE引入阿里icon
weixin_42419575的博客
12-29 579
效果展示： 引入眼睛的图标 步骤： 1：https://www.iconfont.cn/ 2：搜索 3：放在要选择的图标上“添加入库” 4：点击自己的购物车 5：下载代码6，向项目的src文件夹下的assets添加iconfont文件夹，将刚刚9个文件复制到里面 7、main.js中 import './assets/iconfont/iconfont.css'; 8、对应的.vue文件中 <i class="iconfont icon-yanjing"></i> 9、注意 i
vue引入阿里巴巴icon
weixin_43871703的博客
01-06 569
从阿里巴巴icon里面下载的包文件吧所有的图标打包下载 把框里面的文件copy进入assets文件； 在main.js 引入iconfont.css 即可
vue引入阿里巴巴iconfont图标(简单易懂)
word妈呀！的博客
03-31 869
为什么我们要使用阿里图标库
vue2 引入阿里图标库iconfont
努力
02-29 1986
阿里 iconfont 使用方法
vue引用阿里彩色图标（symbol引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 6337
引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...
vue element项目引入icon图标的方法
08-27
本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 Web 开发中，使用 Icon 图标可以减少页面...
在Vue中使用icon 字体图标的方法
12-02
本篇文章将详细介绍如何在Vue中使用阿里Iconfont图标库，以及两种不同的使用方法：在线引入和本地化部署。 1. **在线使用阿里Iconfont图标库** - **步骤1**：访问阿里Iconfont官方网站（http://www.iconfont.cn/）...
vue开发一、在Vue中引入ElementUI二、在Vue中使用阿里图标库
小墨蛇的博客
11-22 2898
一、在Vue中引入ElementUI 1. 安装ElementUI 2. 引入ElementUI 3. 使用ElementUI组件 二、在Vue中使用阿里图标库 1. 在阿里图标库中选择图标 2. 下载图标 3. 引入图标 4. 使用图标 总结
vue导入图标的3种方式【阿里图标】
weixin_41027083的博客
03-22 1万+
第一种方式 Font class- css 点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。 @font-face { font-family: "iconfont"; /* Project id 3262995 */ src: url('iconfont.woff2?t=1647910536684') format('woff2'), url('iconfont.woff?t=1
【vue2】vue引入阿里矢量图标iconfont以及引入lodash插件
????鱼干～
03-26 2522
【vue2】vue引入阿里矢量图标iconfont以及引入lodash插件
vue如何引入icon图标并使用
linduj的博客
11-29 8146
vue如何引入icon图标并使用
vue前端项目引入iconfont阿里图标的四种方式
热门推荐
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
若以vue引入阿里巴巴iconfont图标
最新发布
someTuzkis的博客
06-03 558
若依vue使用阿里巴巴iconfont图标
前端项目，个人笔记（二）【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】
LYJbao的博客
03-19 1175
【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】
Vue2中引入Symbol形式的icon
weixin_45086164的博客
10-29 1036
Vue2中引入Symbol形式的icon
vue项目引入外部图标
xc9711的博客
09-05 6230
以vantui框架为例教大家vue项目如何引入外部图标
vue2项目插入icon font步骤
weixin_52115201的博客
01-25 1117
7.icon文件夹中的js文件就是步骤5的iconfont.js文件，iconfont.css文件的内容为。9.其中的href为#icon-加icon名称，这个名称在icon网站页面点编辑就可以看到。6.在vue项目中的assets文件夹中创建文件夹icon，层级如下。
Vue项目中引用‘阿里巴巴字体图标库iconfont’
2401_84418948的博客
04-29 956
我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。
Vue中集成阿里巴巴图标：黑白与彩色实现与调整
在Vue中使用阿里巴巴的黑白图标和彩色图标是一项常见的UI设计需求，这篇文章将指导你如何在Vue项目中有效地集成这两个图标集。首先，你需要访问阿里巴巴图标库网站（），这里提供了丰富的图标资源供你选择。 1. ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值