7步搞定阿里巴巴矢量图

最新推荐文章于 2024-04-15 10:34:08 发布
最新推荐文章于 2024-04-15 10:34:08 发布
阅读量4.6k 收藏
点赞数
分类专栏： 矢量图 前言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40402681/article/details/82861159
版权

1.进入阿里巴巴矢量图官网
http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
2.注册、登录
3.按图操作在这里插入图片描述
4.将自己上传 的svg图或者搜索的图添加入库
在这里插入图片描述
5.点击购物车，然后添加至自己的项目
在这里插入图片描述
6.将生成的链接在新窗口打开，在自己的项目中创建font.css文件，将链接中的代码copy进css文件中
在这里插入图片描述
7.在页面引入font.css文件，然后引用标签一般用i

第一个类是你拷贝的css里面统一的类名，第二个是图标名称，图标名称就在网站你的项目中，可以拷贝，css文件中也有；

strive涛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于阿里巴巴矢量图的用法
Adger
02-12 3733
首先当然是找到他们的官网 https://www.iconfont.cn/ 鼠标放上去搜索你想要搜索的矢量图,比如 购物车 得到你想要的矢量图, 加入购物车 如果你没有登录的话，会叫你登录，登录的话很简单了，用微博，或者githup账号登录了 如果你没有创建一个项目的话，会叫你创建一个项目，相当于就是 给你好整理，放在一个文件夹 跳转到此界面 下载至本地，目录自选,得到一个zip文件，解压...
copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载
05-11
copy_alibaba 一键复制阿里巴巴矢量图标库SVG图标，无需下载 阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。 苦于每次想要使用图标库 的图标都需要下载图标===拉到文件夹====写文件路径/////或者是需要下载svg 后在经过啰嗦的复制粘贴才能放在项目上用。 追求效率的SP怎么可能容忍这种低效率的操作！！！！！！！ 果断撸一段小脚本试试水，想不到效果好不错。 一、试水工具 本次小试水使用了著名的userscript 插件： tempermonkey 打开chrome 浏览器,地址栏输入：chrome://extensions/ 进入谷歌浏览器插件安装 把mxclass_com_Tampermonkey_chrome插件.crx 文件拖拽到浏览器，自动安装插件 安装插件后，把copy_alibaba.js中的脚本文件全
阿里巴巴矢量图使用方法
最新发布
qq_43757976的博客
04-15 346
注意：href中的地址使用的是相对路径，这时，需要将解压得到的文件夹中的iconfont.css文件和页面放在同级上。或者你可以改变它的路径。1、第一步：（如图）引用项目下面生成的fontclass代码：（具体，只要复制图中的代码放入自己的代码即可）这几种方法只要点击相应的后，往下拉将会出现如图示的 解释如何使用的步骤。2、第二步：将上图的代码放进你所写的代码中。按图中要求进行即可。下面，我将把font class方法的具体使用步骤写出来。然后点击那个唯一的显示的是网页的文件；
阿里巴巴矢量图的使用
tanx17的博客
07-04 1万+
博主在看到阿里巴巴的网站时发现 购物车前面的图标不是用img来做的，是用阿里巴巴的矢量图来做的。接下来介绍一下，关于阿里巴巴矢量图的使用方法。 1.首先进入网站 http://www.iconfont.cn/ 2.在输入框中输入自己需要的图标 比如输入：购物车 3.添加入库 4.单击购物车图标的按钮，如图所示 点击添加至项目，创建一个项目名。这里可能会让你登录账号，所以登录
阿里巴巴矢量图的使用方法
热门推荐
浮萍的博客
03-14 2万+
看到阿里巴巴的网站时发现 购物车前面的图标不是用img来做的，是用阿里巴巴的矢量图来做的。接下来介绍一下，关于阿里巴巴矢量图的使用方法。 1.首先进入网站 http://www.iconfont.cn/ 2.在输入框中输入自己需要的图标 比如输入：购物车 3.添加入库  4.单击购物车图标的按钮，如图所示  点击添加至项目，创建一个项目名。这里可能会让你登录账号，所以登录账号就行。 5.编码方式选...
一文搞定阿里巴巴矢量图库
m0_47186697的博客
03-20 1339
一文搞定 阿里巴巴矢量图
阿里巴巴 v5.0.4.2
01-21
阿里巴巴 v5.0.4.2 版本：5.0.4.2 软件语言：中文 软件类别：购物 软件大小：16.32 MB 适用固件：2.1及更高固件 官方免费客户端，阿里巴巴=市场+旺旺+交易+支付+物流查询，批发价购物，混批进货，让买家也享受淘宝...
几步搞定CPU与散热器
01-20
　步：将CPU安装到主板上　首先需要将主板放在干净整洁的平面桌面上-->打开主板CPU插槽上面的盖子-->然后打开CPU固定卡子-->等待CPU安装。　下图看到的是主板CPU插槽，它属于Intel CPU设计的插槽，那些细密...
4步搞定GIF图.doc
09-20
4步搞定GIF图.doc
七步搞定企业上云迁移.docx
10-24
七步搞定企业上云迁移.docx
NET Framework 3.5简单1步搞定
02-29
简单1步搞定 NET Framework 3.5 ，离线下载简单1步搞定 NET Framework 3.5 ，离线下载简单1步搞定 NET Framework 3.5 ，离线下载简单1步搞定 NET Framework 3.5 ，离线下载简单1步搞定 NET Framework 3.5 ，离线下载...
阿里巴巴矢量图标的使用
weixin_45704506的博客
09-24 1086
阿里巴巴矢量图标网址 ：https://www.iconfont.cn/. 平时做前端，很多小图标找不到，或者图标颜色，大小不是很合适，阿里巴巴矢量图标，在很大程度上解决了这一问题 打开上面的网站，通过搜索自己想要的图标，我就以微信图标为例 你需要用什么图标就搜什么图标 然后选择自己想要的图标，点上去就会出现两种下载方式 下面那个是下载图片格式 当格式，颜色，大小都选择好之后，就可以下载使用，我个人不是很喜欢这个，我更喜欢另一种方式。就是通过下载代码的方式，那样更好根据页面进行调节。 另一种方式就是
阿里矢量图标
x0572_的博客
07-27 680
矢量图标
阿里巴巴图标矢量库使用方法详解，适用于各种框架
qq_61838643的博客
08-10 5476
官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正添加到购物车，选择完成后点击上方导航栏图标之后选择添加至项目（没有项目可以临时创建一个）选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可。
vue实现简单的数据筛选
huihuihaha222222的博客
06-26 2700
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...
阿里巴巴矢量图标库使用
wuyt2008的专栏
12-07 9531
之前的矢量图标，经常用的是fontawesome的，不过最近阿里巴巴推出了个矢量图包库，也不错。 fontawesome使用方法：http://blog.csdn.net/wuyt2008/article/details/50509274 阿里巴巴矢量图标库地址：http://www.iconfont.cn/ 需要用新浪微博或者github的账号登录，
uniapp 导航栏右侧 文字按钮/图标按钮 阿里巴巴矢量图引入
znx981912的博客
03-24 2756
添加代码至项目 引入css以及ttf文件→static文件夹 APP.vue引入css 文字不用引入外部文件 阿里巴巴矢量图需要引入先 监听导航栏点击方法 onNavigationBarButtonTap(e){ console.log(e); } 文字 { "path" : "pages/maintenance/maintain/inventory/inventory", "style" :
阿里矢量图标库
王山而的博客
01-04 3439
记录阿里矢量图标库使用 【1】 【2】 【4】 【5】 【3】 【6】 https://www.iconfont.cn/将需要小图标“添加入库”【1】 点右下角cart图标，“添加至项目”【2】到自己的项目下 进入“我的项目”，“下载至本地”，解压...
阿里巴巴图标库下载和使用，以及怎么在uni-app中导入使用图标库
小小梁的博客
08-23 1980
一、下载阿里巴巴矢量图文件 1、阿里巴巴矢量图地址：https://www.iconfont.cn 2、也可以去搜索 阿里巴巴矢量图 （1）阿里巴巴矢量图页面 （2）打开图标库 （3）添加到库中 添加至项目 就是我们要用到的字体图标库文件 下载素材 就是可以自定义颜色和大小的图片 不如png,jpg,jpeg,svg什么的 下载代码 就是也是下载的的字体图标文件 格式不一样而已 ** 重点是我们添加至项目中** （4）添加至项目 （5）项目设置
二十五步跟我搞定Linux系统
02-25
第七步 接下来是设置root密码，root用户是系统的超级管理员，设置一个安全且易记的密码，并点击"下一步"继续。 第八步 接下来是选择软件包，用户可以根据自己的需求选择要安装的软件包。对于新手用户来说，建议选择...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值