阿里图标 矢量图 iconfont 如何在vue中使用

最新推荐文章于 2023-02-26 11:29:28 发布
最新推荐文章于 2023-02-26 11:29:28 发布
阅读量645 收藏 1
点赞数
分类专栏： 阿里图标icon 文章标签： javascript html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419441/article/details/107959423
版权

首先进入阿里图标库

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4

选择需要的图表 点击红色购物车按钮

添加到自己的项目中 如没有 可以创建  

 

查看自己的图标库

 把当前的项目下载到本地电脑中

获取到当前文件列表 把当前的文件电脑存储在 当前项目的文件中

新建icon文件 把下载的项目内容存储进来

 

 

在main.js中引入

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

在所使用icon的页面 直接使用

<span class="iconfont">&#xe609;</span>

&#xe609;为图标库 icon图标所对应的代码

连风都不记得我
关注
专栏目录
如何在vue脚手架中使用阿里矢量图标库
NamedDifficult的博客
10-05 424
iconfont-阿里巴巴矢量图标库 在官网中挑选图标添加到购物车------>点击右上角的购物车------>添加至项目------>新建项目------>输入项目名称------>确定------>然后就进入到我的项目中了------>点击下载至本地 然后压缩文件夹 打开后会看到上面的文件：将iconfont.css复制到自己vue脚手架的src路径下的assets下自定义的文件夹中 eg: 这还不行的，还要讲下载的文件下的几个...
Vue项目中引用‘阿里巴巴字体图标库iconfont’
最新发布
2401_84418948的博客
04-29 656
我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。
vue引入阿里巴巴矢量图标
糖长老莫小贝的博客
02-12 837
阿里巴巴矢量图标库相较于其他库的icon图标要丰富不少，目前有418w+ icon，可以说是前端工作人员的首选，博主也在这里安利一下。 网址：点击直达 有时候我们写vue的时候经常要引入icon图标，下面我就简单介绍一下vue 如何引入阿里图标。 注册一个账号是必不可少的O(∩_∩)O哈哈~，这里就不介绍了。 去阿里图标矢量图标库将想要的图标添加入库。 再去库中将图标添加到项目。 ...
vue项目中如何引入iconfont中的图片
mffandxx的博客
12-27 3106
1.前言Iconfont中有很多图片供我们使用，如何在vue项目中引入Iconfont的图片呢？请看下文2.方法2.1挑选图标的过程挑选图标的过程（共6步） 进入网站：Iconfont网址：http://www.iconfont.cn 点击网站上方的“官方图标库”，选择自己喜欢的图标。 选择好自己喜欢的图标，选择添加至项目，然后新建项目，并输入名称。 项目添加好后，会自动给我们转入到我们项目
vue项目中如何引入阿里矢量图
weixin_45645412的博客
03-03 2426
1.首先去阿里矢量图官网 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1 2.在阿里矢量图官网把我们需要的矢量图加入到购物车里面 3.加入到购物车以后打开右上角的购物车图表，会在右侧弹出一个页面 4.然后我们选择添加至项目，然后在右上架有一个加号，点击加号，然后定义一个文件名， 名字可以随便定义 5.定义完文件名以后，点击确定，会跳转到你选择矢量图的那个页面，切记
如何在Vue项目中使用阿里的Iconfont
weixin_34186931的博客
05-26 455
正片之前先推广下阿里的Iconfont，图库丰富，支持个性化定制，只需添加需要的图标，创建项目下载到本地，放在项目文件目录下即可，推荐大家使用。 iconfont 的三种使用方式 1. Unicode 个人习惯在src目录下新建一个icon文件夹存放下载的样式文件 然后在src目录下新建style.css文件统一管理样式 @font-face { font-family: "iconfon...
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标
Yueqin0512的博客
05-18 915
点击——>阿里巴巴矢量图标库官网 登录 将图片添加入库 购物车中查看，添加至项目 下载至本地，解压文件夹 文件夹中含有以下文件 将此文件夹重命名并放入项目文件-src-assets文件夹中 在main.js中导入图标库的css文件 import './assets/yonghu/iconfont.css' 复制图标名字，使用element-ui插入 prefix-icon前置图标，添加固定类iconfont，以及复制下来的图标代码名称icon-yongh
vue 使用 iconfont-阿里巴巴矢量图标库
一心只想敲好代码
02-26 387
vue 使用 iconfont-阿里巴巴矢量图标库
在vue中使用iconfont字体图标
qq_45601874的博客
12-16 926
在Vue中使用iconfont字体图标 1.进入阿里巴巴矢量图官网 2.注册一个账号并在我的项目里创建一个项目 3.把需要用到的图标加入购物车 4.点击购物车添加图标至项目 5.在我的项目里下载至本地 6.解压后得到的文件 7.把iconfont.css放入Vue项目中 8.在assets里新建一个font文件夹，然后在之前下载好的文件里找到下面的文件放进去 9.在iconfont.css中修改这3个文件的路径 10.在main.js中引入字体样式文件 11.在图标库中复制需要用的图标，
在vue项目里面使用阿里矢量图标
qq_44747508的博客
01-03 897
在vue项目里面使用阿里矢量图标 先去官网下载 阿里矢量图下载地址：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 将需要的图标加入购物车 打开购物车下载图标代码 解压将css文件放到自己的项目中 打开购物车添加至项目 新建一个项目确认 然后就到这个页面 点击查看在线链接 点击生成代码就可以了 ...
icon图标库
直到世界的尽头
06-25 9917
简介 什么是图标字体？ 图标字体不同于标准的字体数字的字符，是一种包含符号和字形（如箭头、文件夹、放大镜）的字体文件。 例如： 图标字体的使用就像和使用网页字体一样，个人理解就是把一些图标以字体的形式保存在一个字体文件里面，然后再以调用字体的方式来使用。具体使用方法详情可以去看看css中的@font-face的用法，在这里就不详细解释了。 免费图标字体
iconfont 在原有的图标中，增加新的图标
热门推荐
别皱眉
11-28 2万+
第一步 下载样式 http://www.iconfont.cn/ 选择图表，点击加入购物车 第二步 解压下载文件到项目 css中 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face 拷贝到原 iconfont.css 中 第五步 .icon-icongerenjishiben:before { content: “\e6a3”; } .ico...
[原创] 阿里巴巴矢量图标库全选技巧
大象的博客
12-13 1158
在阿里矢量库中找到一个喜欢的图标库，想要全部下载，但是发现需要挨个点击添加购物车中，如下图所示，居然没找一个可以全选的按钮！！总之不知道为啥要这样设计吧。但是确实很不方便。 想要全选的话，操作如下 按下 F12 或者 打开浏览器开发者模式 进入console的窗口 输入下列代码 var iconList = document.querySelectorAll('.icon-go...
vue引入阿里彩色矢量图标
池海
12-30 1356
1.将喜欢的图标添加到库中后加入项目，使用Symbol的方式下载到本地 2.下载后将文件解压加入到你的项目中： 3.在main文件中引入入iconfont.css和iconfont.js文件 4.打开iconfont.css文件，将以下代码加进去 [class^="el-icon-ch"], [class*=" el-icon-ch"]/*这里有空格，名字随意*/* { font-fam...
vue项目中使用阿里巴巴矢量图标库iconfont
全栈开发工程师，不定期分享Python、Golang、Java、前端等程序员必备技术，干货满满，不断充电！
04-11 2481
效果 1. 打开iconfont阿里巴巴官网 https://www.iconfont.cn 2. 登录网站，新建项目 3. 把需要的图标添加至购物车 4. 打开购物车并选择添加至刚新建的项目，然后确定 5. 接下来可以在项目中看到你选中的图标，这时候可以点击下载至本地 6. 打开下载的zip包就可以看到里面的文件，将里面的文件取出 7. 在vue项目下的assets文件夹下创建icon文件夹，将取出的文件放入这个文件夹下 8. 在main.js中引入 // 引入Iconfont 矢量图标库
Vue3项目动态引入iconfont（阿里巴巴矢量图标库）
青年码农
12-18 1774
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具这篇文章主要讲的是在Vue3项目上，动态引用iconfont库。iconfont怎么新建项目，这里就不多说了，我们要用到的就是下方圈出来的。1.定义方法我们定义一个方法，动态通过link引入我们的iconfont文件，...
Vue 添加第三方图标(阿里矢量图)
Mr-k的博客
11-26 897
1.阿里矢量图官网，创建项目阿里矢量图 2.创建项目后，前缀这里在配置中需要用到，注意 3.选择需要下载的矢量图标，选择Font class，下载到本地 4.解压后获得以下文件 5.到Vue项目下，找个地方存放以上所有文件，直接复制粘贴即可 6.打开iconfont.css文件，对其进行一些配置，这里的icon就是你项目当时配的后前缀！！ [class^="icon"], [class*...
在vue中使用阿里iconfont图标。
答案的博客
05-24 730
转自个人博客 http://www.zuidaima.com/blog/4421067481730048.htm 1.www.iconfont.cn，去阿里下的这个网址去搜索并选择自己喜爱的图标，图片非常全，非常好用，非常....词汇量少，不知道怎么吹了，不得不感叹这些UI小姐姐太牛皮了​，注意咯，看到自己喜爱的图标，收藏到自己的购物车里边（见图1）。 ​（图1）​ 2.点完之后，你...
VUE项目中使用IconFont 阿里巴巴矢量图标库
知无涯
01-14 5752
   近日为了方便前端同事图标的使用,在现有的项目中引入了一下 阿里巴巴矢量图标库iconfont 现记录如下   登录iconfont平台后,创建一个项目,然后将svg的图标导入或拖拽到项目中, 再项目详情界面,进行生成代码, 图标引入方式有三种 Unicode, Font class 以及Symbol 下面简单介绍一下Unicode    将生成的css代码 @font-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值