比特派钱包中文版app下载|阿里巴巴图标矢量图库

作者: 比特派钱包中文版app下载
2024-03-14 13:03:06

iconfont-阿里巴巴矢量图标库

15个免费矢量图标网站（强烈推荐❗❗❗） - 知乎

15个免费矢量图标网站（强烈推荐❗❗❗） - 知乎切换模式写文章登录/注册15个免费矢量图标网站（强烈推荐❗❗❗）科研懒羊羊1492893890@qq.com1、Iconfont网址：https://www.iconfont.cn/由阿里巴巴矢量图标库提供的一种开放式的矢量图标管理和交流平台，提供了丰富的矢量图标资源和方便的管理和下载服务。（不能商用）2、Icons8网址：https://icons8.com/用户可浏览多达10w+个图标、照片和插图，并可通过许多不同的文件格式下载这些资源。（不能商用）3、Iconstore网址：https://www.iconstore.co/丰富的图标和符号资源库，并且每个图标都提供了多种不同的格式和尺寸，其网站界面简洁明了，搜索和浏览更加便捷。（可以商用）4、Librestock网址：https://librestock.com/拥有多种素材类型，包括照片、视频、音乐、插图等，而且每个素材都提供了多种分辨率和格式。同时，librestock的搜索引擎功能也更加精准和智能，能够根据用户输入的关键词自动匹配相关素材。（可以商用）5、Flaticon网址：https://www.flaticon.com/图标数量多、种类全、质量高，并且提供方便的搜索、筛选、定制等功能，适合网页设计、APP开发等领域使用。（可以商用）6、Freepik网址：https://www.freepik.com/拥有巨大的素材库、详细的分类、高质量的图像、海量的免费资源、源文件下载、支持多种语言等功能，适用于平面设计、UI设计、网页设计等领域。（可以商用）7、Cleanpng网址：https://www.cleanpng.com/提供矢量图和透明PNG图，图像质量高、更新频率快，适合使用于PPT、海报、网站、APP等设计制作。（建议仅限个人使用）8、unDraw网址：https://undraw.co/illustrations提供手绘矢量图，设计简单美观、风格独特，并提供SVG、PNG、Sketch和Adobe XD等多种格式可下载，可用于网站、APP、PPT等多种场景。（可以商用）9、Pixabay网址：https://pixabay.com/素材质量高、数量大，且无需注明来源和作者信息，非常适合用于商业用途和个人项目。（可以商用）10、Vecteezy网址：https://www.vecteezy.com/拥有庞大的素材库和高品质的设计资源，同时也支持用户提交自己的矢量图作品。适用于不同类型的创意项目和多种应用场合。（可以商用）11、Openpeeps网址：https://www.openpeeps.com/提供可爱卡通人物矢量图的网站，提供大量多样化的手绘人物素材，并支持用户进行个性化编辑和自定义颜色及造型。无需版权许可，Openpeeps适用于各类创意项目和商业应用。（可以商用）12、Openclipart网址：https://openclipart.org/提供矢量图像和艺术插图，包含了数万个可自由使用的图像素材和图标库，图像数量众多且涵盖多个分类及主题，适合各种设计和创意用途。Openclipart的资源全部为公共领域内容，无需版权许可，可以自由使用。（可以商用）13、Easyicon网址：http://www.easyicon.cc/通过搜索想要的图标快速、高效的下载和使用，比如输入箭头就会出现各种各样的箭头图标。（可以商用）14、Iconfinder网址：https://www.iconfinder.com/和Iconstore差不多，提供了高质量、多样化的图标库和图标制作服务，和丰富的搜索、筛选和下载工具。（有些可以）15、Vectorjunky网址：https://www.vectorjunky.com/提供了海量的免费矢量图素材，每个图像都采用了精细的细节设计，可以根据自己的需要随意修改和定制下载下来的矢量图，满足不同行业和领域的需求。（可以商用）每天更新科研、学习小工具，一起学习吧！！！编辑于 2023-08-10 22:02・IP 属地广东矢量矢量图图片赞同 798 条评论分享喜欢收藏申请

阿里巴巴矢量图标库的使用，超详细用法-CSDN博客

阿里巴巴矢量图标库的使用，超详细用法

最新推荐文章于 2023-08-10 16:41:04 发布

律己以严

最新推荐文章于 2023-08-10 16:41:04 发布

阅读量2.6w

点赞数

分类专栏：

阿里图库的使用

文章标签：

css

html

本文链接：https://blog.csdn.net/piaoliangj/article/details/108990596

版权

阿里图库的使用

专栏收录该内容

1 篇文章

1 订阅

订阅专栏

阿里巴巴矢量图标库的使用

官网地址： iconfont 阿里巴巴矢量图标库

登录在页面中选择喜欢图标库点进鼠标悬停想要的图标选择添加入库入库成功后本图标会有一个虚线框右上角的库图标会有个数的小红点点击购物车图标选择添加至项目（如果没有就创建一个）确定就会跳转到我的项目页面选择图标添加入库选择 Font class 点击下载至本地下载完成后，打开压缩包，只解压一个iconfont.css文件到页面要用到的css包里

然后开始在代码中操作

在head中导入iconfont.css文件官网有三种方法，在导入包后三种方法都可以用，这里就举第一个例子吧

第一步：拷贝项目下面生成的font-face

/* 注：官网里的url没有 http:// 在代码里都得加上 */

@font-face {

font-family: 'iconfont';

src: url('http://iconfont.eot');

src: url('http://iconfont.eot?#iefix') format('embedded-opentype'),

url('http://iconfont.woff') format('woff'),

url('http://iconfont.ttf') format('truetype'),

url('http://iconfont.svg#iconfont') format('svg');

}

第二步：定义使用iconfont的样式

/* 要修改这个的样式得把引入的iconfont.css包放在自己的css文件上面 */

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

第三步：挑选相应图标并获取字体编码，应用于页面



i标签里的代码来源于 Unicode 的代码

这样之后打开页就能显示啦！！！这样的图标相当于文字，文字有的样式，图标也能使用，样式的改变在第二步的代码中设置哦！！！

因为一直没找到官网其他解释的地址，所以用图片展示吧：

优惠劵

律己以严

关注

踩

觉得还不错?

一键收藏

知道了

阿里巴巴矢量图标库的使用，超详细用法

阿里巴巴矢量图标库在页面中的使用官网地址： iconfont 阿里巴巴矢量图标库登录在页面中选择喜欢图标库点进鼠标悬停想要的图标选择添加入库入库成功后本图标会有一个虚线框右上角的库图标会有个数的小红点点击购物车图标选择添加至项目（如果没有就创建一个）确定就会跳转到我的项目页面选择图标添加入库选择 Font class点击下载至本地下载完成后，打开压缩包，只解压一个iconfont.css文件到页面要用到的css包里然后开始在代码中操作在head中导入

复制链接

扫一扫

专栏目录

阿里矢量图标库WPF使用Demo

12-27

iconfont_阿里矢量图标库WPF使用Demo，我发现网上没有详细的WPF使用示例，便做了一个简单的示例给大家参考。

总结：引入Iconfont-阿里巴巴矢量图标库的三种方式，小白必看，看了就会~

止水Itachi

06-11

4079

1、首先，百度搜索“阿里矢量库”，点进去，然后注册一个账号登录进入。

2、比如你想要的一个购物车图片，搜索框里输入“购物车”，点击搜索。

3、选择加入你想要的购物车图标，点击框住的购物车图标，不要点线面的下载图标哦

4、此时在你的右上角购物车中已加入进去，当然，你可以选择同时加入多个图标进入你的购物车，在这里我加入了两种图标。

5、点开你的右上角购物车，选择“添加至项目”。

6、点击新建文件夹

7、随意命名，在这里我命名为“举例子”，然后确定。

8、未完待续，明天更新。。。

...

5 条评论

您还未登录，请先

后发表或查看评论

CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

11-21

进入阿里巴巴矢量图标库

阿里巴巴矢量图标库

选择喜欢的图标的，点击添加到库

选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）

然后在右侧中点击添加至项目

之后在个人主页中可以看见

1.Unicode

2.Font class

此次便是对于这两个的使用

Unicode

开始进入时，会自动生成代码，如果没有，则点击生成

例:

@font-face {

font-family: 'iconfont'; /* project id 1743720 */

src: url('//at.alicdn.com/t/font_17437

阿里巴巴图标矢量库使用方法详解，适用于各种框架

qq_61838643的博客

08-10

2923

官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正添加到购物车，选择完成后点击上方导航栏图标之后选择添加至项目（没有项目可以临时创建一个）选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可。

阿里巴巴图标库的字体图标使用方法

weixin_43698398的博客

01-22

7104

有时候，阿里巴巴矢量图标库没有项目所需的图标，这时候我们就需要在Iconfont网站上传svg矢量图生成字体图标，再下载使用

具体步骤如下：

1.点击Iconfont网站的上传，然后点击上传图标。

2.然后便可以看到打开的图标，并且下方有两个选择，根据自己的需要选择是否保留颜色提交，提交后便可以在自己的账户看到上传的图标。

3.若需要所有图片，可直接批量加入购物车，查看购物车，有三个下载选项，选择添加至项目，这里需要填写项目名称，然后就可以在自己的账户下看到刚添加的图片

4.将图标下载至本地，直

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

热门文章

阿里巴巴矢量图标库的使用，超详细用法

26597

CSS设置椭圆边框

11149

js鼠标滚轮事件

8516

给图片加一个黑色半透明的遮盖层

6292

js定时器的用法，解决多次点击/触发定时器越走越快的问题

5733

分类专栏

大二软设问题集合

24篇

前端

33篇

css

3篇

vue

1篇

红宝书《JavaScript高级程序设计》笔记

2篇

阿里图库的使用

1篇

最新文章

CSS 的 BFC 和触发BFC

CSS 浮动和清除浮动

CSS选择器权重/优先级

2021年31篇

2020年5篇

分类专栏

大二软设问题集合

24篇

前端

33篇

css

3篇

vue

1篇

红宝书《JavaScript高级程序设计》笔记

2篇

阿里图库的使用

1篇

被折叠的条评论

为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

祝福语

请填写红包祝福语或标题

红包数量

个

红包个数最小为10个

红包总金额

元

红包金额最低5元

余额支付

当前余额3.43元

前往充值 >

需支付：10.00元

取消

确定

下一步

知道了

成就一亿技术人!

领取后你会自动成为博主和红包主的粉丝

规则

hope_wisdom 发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额

抵扣说明：

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

余额充值

超实用的矢量图标库，你知道几个？ - 知乎

超实用的矢量图标库，你知道几个？ - 知乎首发于黑摄会切换模式写文章登录/注册超实用的矢量图标库，你知道几个？Boyka一介书童，颜良而文丑。

合作请私。都是设计师的最爱~① IconFont:阿里巴巴矢量图标库链接：http://www.iconfont.cn/IconFont:阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。内含矢量图标近百万个，是设计师和前端开发的便捷工具。在我们需要图标的时候直接输入关键字搜索即可，例如：输入“高跟鞋”，便找到了359个相关图标，图标颜色可以根据喜好自行调配。下载格式支持SVG、AI、PNG。同时，Iconfont是一个去中心化的平台，支持用户自行上传图标、收藏图标以及管理项目图标，总体而言非常实用。② IconFinder-Free Icons链接：https://www.iconfinder.com/free_icons网站包含超过十万个免费图标，每个图示旁边都有标示使用授权与说明，大部分都可以免费使用在个人或商业用途。同时，网站无需注册即可使用。③ Find Icons链接：http://findicons.com/Find Icons，号称全球最大的图标搜索引擎，网站涵盖了2677个图标集和475450个图标。该站支持中文浏览，但是关键字搜索只能使用英文。同样无需登录，即可免费下载多种版本的图标。④ Vexels链接：https://www.vexels.com/这个网站提供了大批的高质量免费矢量图资源，搭配上标签、分类和搜索，你可以轻松找到自己需要的图片。其中可免费下载的矢量文件包括:矢量图标、矢量图案、矢量漩涡、花形图案、背景、笔刷等等。进入免费矢量图界面后，点击Download 后即可下载压缩包文件，此网站无需注册即可正常使用。⑤ Icons8链接：https://icons8.com/Icons8，来自国外的矢量图标库，使用方式和Find Icons差不多，都是直接输入关键字进行搜索。网站资源丰富，涵盖4万个原创矢量图标，支持分类搜索，并且可以选择合适的图标尺寸进行下载，实用性一流。如需获得更多实用网站推荐或者修图使用技巧，可以翻看我的其余文章 ∩▂∩ ，谢~编辑于 2017-02-13 14:58设计互联网Adobe Photoshop赞同 117820 条评论分享喜欢收藏申请转载文章被以下专栏收录黑摄会从拍摄到后期，将光与影演绎出夺

阿里巴巴矢量图标库基本使用 - 知乎

阿里巴巴矢量图标库基本使用 - 知乎切换模式写文章登录/注册阿里巴巴矢量图标库基本使用King在开发中会使用到很多小图标，但这些图标又不好找，自己做又不会。阿里巴巴旗下有一个很好用的软件：阿里巴巴矢量图标库，网址：。只介绍一下怎么快速上手，其它的自己去看官网教程。1.找自己项目需要的图标，添加到库中2.去库中把图标添加到项目中3.生成在线链接，去项目中进行测试。测试完成后，下载项目中的图标，再引至本地项目中。css引入一般图标是写在i标签中的，class命名由iocnfont+空格+图标下面的英文。按照这个格式引入。图标大小可以由样式自由控制。 tip：由于字体图标也算是字体的一种，因此受font-size和color的影响。发布于 2019-04-18 22:32HTML赞同 4添加评论分享喜欢收藏申请

iconfont-阿里巴巴矢量图标库的食用方式-CSDN博客

iconfont-阿里巴巴矢量图标库的食用方式

最新推荐文章于 2024-03-13 20:59:56 发布

厂里英才

最新推荐文章于 2024-03-13 20:59:56 发布

阅读量279

点赞数

分类专栏：

Vue

文章标签：

前端

vue

阿里巴巴矢量图标库

本文链接：https://blog.csdn.net/qq_71654538/article/details/136608129

版权

Vue

专栏收录该内容

12 篇文章

0 订阅

订阅专栏

1 前言

2 食用方法

2.1 搜索需要的图标

2.2 选择需要的图标并添加入库

2.3 添加至项目

2.4 获取代码

2.5 添加至我们的项目

2.5.1 index.html中添加fontclass代码

2.5.2 挑选相应图标并获取类名，应用于页面

1 前言

本人在最近的学习过程中，发现了一个方便好用的字体图标平台iconfont-阿里巴巴矢量图标库，它在一定程度上解决了我素材的烦恼，现将其食用方法进行介绍。其官网链接如下：

iconfont-阿里巴巴矢量图标库

本文主要介绍图标的食用方法，字体请读着自行探索。

2 食用方法

2.1 搜索需要的图标

2.2 选择需要的图标并添加入库

2.3 添加至项目

2.4 获取代码

2.3确定之后一般会跳转到我们所需页面，如果没有跳转，可以按如下操作到达所需页面。如下。

如果成功到达所需页面就可以按照如下操作获得代码。

我们可以看到有三种方式，我们这里选择使用Font Class，详细和其它方法可以查看官方文档：

iconfont-阿里巴巴矢量图标库

2.5 添加至我们的项目

2.5.1 index.html中添加fontclass代码

将刚才2.4获取的代码粘贴至index.html，如下：

2.5.2 挑选相应图标并获取类名，应用于页面

图标类名的获取方式，如下：

在我们的vue组件适当位置添加所需图标的类名，如下，icon-xxx就是我们需要替换的类名：

更具体点，如下：

效果大致如下：

优惠劵

厂里英才

关注

踩

觉得还不错?

一键收藏

打赏

知道了

iconfont-阿里巴巴矢量图标库的食用方式

本人在最近的学习过程中，发现了一个方便好用的iconfont-阿里巴巴矢量图标库，它在一定程度上解决了我素材的烦恼，现将其食用方法进行介绍。本文主要介绍图标的食用方法，字体请读着自行探索。

复制链接

扫一扫

专栏目录

阿里巴巴矢量图标批量下载 IconontDownload.js

09-04

如何批量下载阿里巴巴矢量图标库的图标？ 1.打开阿里巴巴矢量图标库的项目；2.按F12打开浏览器的开发者工具，复制并执行自动下载图标的代码。

copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载

05-11

一键复制阿里巴巴矢量图标库SVG图标，无需下载阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。苦于每次想要使用图标库的图标都需要下载图标===拉到文件夹====写文件路径/...

参与评论

您还未登录，请先

后发表或查看评论

Draw.io用阿里云3D矢量图标库-2022大数据

06-19

Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...

CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

11-21

进入阿里巴巴矢量图标库阿里巴巴矢量图标库选择喜欢的图标的，点击添加到库选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）然后在右侧中点击添加至项目之后在个人主页中可以...

阿里巴巴矢量图流程图 json 格式

08-17

https://www.iconfont.cn/ 阿里巴巴矢量图 https://app.diagrams.net/ 流程图 https://tool.jisuapi.com/json.html json 格式

Svelte之基础知识一

zoey的专栏

03-10

838

- Svelte 是一个`构建 web 应用程序的工具`。

- Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。

但是有一个关键的区别：Svelte 在 `构建/编译阶段` 将你的应用程序转换为理想的 JavaScript 应用，而不是在运行阶段解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。

你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中

web 课程

热门文章

Mybatis plus的基本使用

1819

软件设计师学习笔记12-数据库的基本概念+数据库的设计过程+概念设计+逻辑设计

1757

Docker-完整项目的部署(保姆级教学)

1713

JavaEE作业-实验三

1597

Vue中路由的使用

1449

分类专栏

力扣

18篇

Vue

12篇

SpringCloud

5篇

报错经验

2篇

Docker

6篇

Liunx

1篇

Mybatis plus

11篇

SpringBoot

28篇

作业

35篇

码蹄集

2篇

git

5篇

工具使用

1篇

算法

2篇

资源分享

1篇

软件设计师

12篇

蓝桥杯

4篇

最新文章

LeetCode 516. 最长回文子序列

pinia优化重复请求

Vue中吸顶导航的实现

2024

03月

29篇

02月

67篇

01月

18篇

2023年24篇

2022年5篇

分类专栏

力扣

18篇

Vue

12篇

SpringCloud

5篇

报错经验

2篇

Docker

6篇

Liunx

1篇

Mybatis plus

11篇

SpringBoot

28篇

作业

35篇

码蹄集

2篇

git

5篇

工具使用

1篇

算法

2篇

资源分享

1篇

软件设计师

12篇

蓝桥杯

4篇

被折叠的条评论

为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

祝福语

请填写红包祝福语或标题

红包数量

个

红包个数最小为10个

红包总金额

元

红包金额最低5元

余额支付

当前余额3.43元

前往充值 >

需支付：10.00元

取消

确定

下一步

知道了

成就一亿技术人!

领取后你会自动成为博主和红包主的粉丝

规则

hope_wisdom 发出的红包

打赏作者

厂里英才

你的鼓励将是我创作的最大动力

¥1

¥2

¥4

¥6

¥10

¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额

抵扣说明：

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

余额充值

iconfont.cn 阿里出品的矢量图标库-阿里云开发者社区

产品解决方案文档与社区权益中心定价云市场合作伙伴支持与服务了解阿里云联系我们4008013260售前咨询售后服务其他服务我要建议我要投诉备案控制台开发者社区首页探索云世界探索云世界云上快速入门，热门云上应用快速查找了解更多问产品动手实践考认证TIANCHI大赛活动广场活动广场丰富的线上&线下活动，深入探索云世界任务中心做任务，得社区积分和周边高校计划让每位学生受益于普惠算力训练营资深技术专家手把手带教话题畅聊无限，分享你的技术见解开发者评测最真实的开发者用云体验乘风者计划让创作激发创新阿里云MVP遇见技术追梦人直播技术交流，直击现场下载下载海量开发者使用工具、手册，免费下载镜像站极速、全面、稳定、安全的开源镜像技术资料开发手册、白皮书、案例集等实战精华插件为开发者定制的Chrome浏览器插件探索云世界新手上云云上应用构建云上数据管理云上探索人工智能云计算弹性计算无影存储网络倚天云原生容器serverless中间件微服务可观测消息队列数据库关系型数据库NoSQL数据库数据仓库数据管理工具PolarDB开源向量数据库热门Modelscope模型即服务弹性计算云原生数据库物联网云效DevOps龙蜥操作系统平头哥钉钉开放平台大数据大数据计算实时数仓Hologres实时计算FlinkE-MapReduceDataWorksElasticsearch机器学习平台PAI智能搜索推荐人工智能机器学习平台PAI视觉智能开放平台智能语音交互自然语言处理多模态模型pythonsdk通用模型开发与运维云效DevOps钉钉宜搭支持服务镜像站码上公益

开发者社区

Segmentfault

文章

正文

iconfont.cn 阿里出品的矢量图标库

2021-11-15

2858

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《

阿里云开发者社区用户服务协议》和

《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写

侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

Iconfont.cn是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。（目前已有7000+图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。）

码农工程师

热门文章

最新文章

为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理解决方案技术解决方案文档与社区文档开发者社区天池大赛培训与认证权益中心免费试用高校计划企业扶持计划推荐返现计划支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心关注阿里云关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务联系我们：4008013260法律声明Cookies政策廉正举报安全举报联系我们加入我们阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么© 2009-2024 Aliyun.com 版权所有增值电信业务经营许可证：浙B2-20080101 域名注册服务机构许可：浙D3-20210002 京D3-20220015浙公网安备 33010602009975号浙B2-20080101-4

Iconfont-阿里巴巴矢量图标库的图标可以商用商用嘛？ - 知乎

Iconfont-阿里巴巴矢量图标库的图标可以商用商用嘛？ - 知乎首页知乎知学堂发现等你来答切换模式登录/注册矢量图矢量Icon FontIconfont-阿里巴巴矢量图标库的图标可以商用商用嘛？Iconfont-阿里巴巴矢量图标库，这里面的图标可以商用嘛，直接方在应用中使用这样。显示全部关注者11被浏览122,383关注问题写回答邀请回答好问题添加评论分享7 个回答默认排序Pixso协同设计已认证账号关注说到下载矢量图标，很多人都会首推阿里巴巴旗下的Iconfont矢量图标库，这里汇聚了海量免费的矢量图标，不过需要注意的是，如果想在商业作品中使用Iconfont的图标，需要提前获得相应的授权，否则不得用于任何商业用途。下图是在Iconfont下载矢量图标时，点击左上角的蓝色小字「素材版本说明」，弹出的素材版权说明：素材仅供广大用户交流使用，未经iconfont或其关联公布公司书面授权许可，不得用于任何商业用途。*Iconfont矢量图标版权说明除了Iconfont阿里巴巴矢量图标库，其实还有不少可以下载矢量图标的素材网站，如：freepikunDrawmanypixelsPixso资源社区前面3个是海外的矢量素材网站，最后一个是国内的素材网站，原生中文语言，支持使用中文进行搜索，对英语基础薄弱的用户更为友好。矢量图标库网站Pixso资源社区在浏览器打开矢量图标库网站「Pixso资源社区」的首页https://pixso.cn/community，点击「图标」类别，可以筛选出社区中所有的图标资源，其中绝大部分为矢量图标。下面展示的是不同矢量图标资源的封面图，点击任意一个封面图，可进入矢量图资源的详情页。Pixso资源社区详情页中间提供了一个预览窗口，可缩放查看图标库包含的图标，点击右上角的「复制」按钮，可一键复制当前的图标库，方便我们进行编辑操作，或是导出想要的矢量图标。*一键复制矢量图标库-Pixso资源社区打开从Pixso资源社区复制的矢量图标库，选中任意一个矢量图层，点击顶部工具栏的「编辑对象」，会弹出下图2个选项——编辑对象：显示所有组成矢量图层的锚点，可自由改变锚点的位置或弧度，从而影响路径的走向变形工具：调出调节整个图层的控件，可整体上改变路径的透视、倾斜程度*编辑调整矢量图标从Pixso导出矢量图标完成对矢量图标的编辑后，我们可以从Pixso中导出图标：单击选中整个矢量图标，点击右侧面板「导出」的加号 +，添加切图属性，下方默认配置导出1x、PNG格式的图片，如果你想导出矢量格式，可以点击PNG格式右侧的下拉按钮，更改为SVG矢量格式，即可导出矢量格式的图标。看到这里，有下载矢量图标素材需求的朋友，不妨在浏览器打开Pixso资源社区首页 https://pixso.cn/community，探索自己想要的矢量图标资源！✅阅读更多码字不易，如果对你有帮助的话，请别忘了赏个【三连】或是【关注】我哦，关注不迷路！我是皮仔 @Pixso协同设计，那我们下次再见咯。发布于 2024-01-09 20:44赞同 2添加评论分享收藏喜欢收起即时设计已认证账号关注Iconfont图标版权需按照 iconfont 站内协议，并非全部免费可商用，使用时需要注意一下。阿里巴巴旗下的 UGC 图标库「iconfront图标插件」，这其中丰富海量的1600W+的图标资源，用来学习参考非常方便但是需要小小的提醒题主一下，这些图标版权需按照 iconfont 站内协议，并非全部免费可商用，使用时需要注意一下。点击获取→iconfront图标插件再推荐几个免费可商用的图标库吧，你可以在「即时设计-插件广场」里找到。我大力推荐的是字节跳动旗下的 PGC 图标站「IconPark图标插件」，你可以一键搜索 IconPark 站内图标并直接拖拽到编辑界面，这些图标都是完全开源的，而且可免费商用，所以完全不用担心版权的问题。点击获取→IconPark图标插件还有「Phosphor Icons图标」也非常适合你。你可以一键搜索 Phosphor Icons 站内图标，点击图标直接将图标添加到编辑区，进行个性化编辑 Phosphor Icons图标及其站点也是同样完全开源的。点击获取→Phosphor Icons图标如果你还在找更多实用又美观的设计素材，欢迎来即时设计的素材广场看一看！关注即时设计 @即时设计，设计资源不迷路～发布于 2023-12-27 16:05赞同添加评论分享收藏喜欢

阿里妈妈iconfont矢量图标的使用方法(超详细)_阿里矢量图图标-CSDN博客

阿里妈妈iconfont矢量图标的使用方法(超详细)

最新推荐文章于 2024-03-10 10:30:11 发布

但行好事wlw

最新推荐文章于 2024-03-10 10:30:11 发布

阅读量2.2w

点赞数

分类专栏：

HTML

CSS

文章标签：

前端

本文链接：https://blog.csdn.net/egg_er/article/details/121022457

版权

CSS

同时被 2 个专栏收录

21 篇文章

6 订阅

订阅专栏

HTML

13 篇文章

0 订阅

订阅专栏

iconfont使用方法

1.为什么要使用iconfont？之前我们一直使用的是雪碧图，虽然好用，但是也是有一定的限制的，比如说，你希望这个图标大一点，当然你也可以调节雪碧图的大小但是此时会出现图片不清楚的情况，那么这个时候也就体现了iconfont的好处了，它的特点：虽然显示的是图片的形式，但是本质确是字体，也就具备了font的相关属性，可以调节它的大小，等等属性，非常方便，好处聊完了，下面看看怎么运用它吧！

怎么下载矢量图？

阿里矢量图网站：www.iconfont.cn 不收费哦~~，当然也有国外的矢量图网站我就不多说了，咱们的就够用。进入网站以后先注册，注册完成以后，你会看到界面各式各样的矢量图标。找一个自己需要的模块进去可以看到第二行第三个是我喜欢的，鼠标移动到自己希望使用的图标上面，就会显示一个购物车，收藏，以及下载的图标，此时点击第一个购物车的形状的图标。点击上面的购物车；先说说吧这三个按钮的作用：第一个就是把这些矢量图直接加到自己的项目当中；第二个是直接把矢量图下载下来，不过此时下载下来的也就是图片了，不再是字体；不用想肯定是用第三种啦，第三种下载以后就是一个zip文件，下载以后怎么使用呢？

把下载的zip文件解压，解压以后更改你希望的名字，我通常是改成fonts，更改以后把他存到你项目的目录里，然后打开font文件夹，里面有几个文件需要注意，如下图：

进入font文件夹：第一个demo.css文件，里面有你下载矢量图的文件地址，操作的话就是复制里面的以下代码：把以下代码复制到你这个html文件所链接的css文件中；

@font-face {

font-family: "iconfont logo";

src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');

src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),

url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),

url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),

url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');

}

第二个：demo_index.html文件可以直接打开，里面有你下载好的矢量图，矢量图下方有相应的代码。复制，放到span中，把span的类名设置成iconfont，或者什么都可以不过，你的css文件中此时都要给这个类名加上这句话，类名：{font-family:"iconfont" !important;}即可；那么来看看整体的效果吧：（详细）把上面的图片中的步骤完成，就能实现啦。学会了嘛？还不清楚的话留言哦。（一定要注意路径问题）

优惠劵

但行好事wlw

关注

踩

觉得还不错?

一键收藏

知道了

阿里妈妈iconfont矢量图标的使用方法(超详细)

iconfont使用方法1.为什么要使用iconfont？之前我们一直使用的是雪碧图，虽然好用，但是也是有一定的限制的，比如说，你希望这个图标大一点，当然你也可以调节雪碧图的大小但是此时会出现图片不清楚的情况，那么这个时候也就体现了iconfont的好处了，它的特点：虽然显示的是图片的形式，但是本质确是字体，也就具备了font的相关属性，可以调节它的大小，等等属性，非常方便，好处聊完了，下面看看怎么运用它吧！怎么下载矢量图？阿里矢量图网站：www.iconfont.cn 不收费哦~~，当然也有国外的

复制链接

扫一扫

专栏目录

copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载

05-11

copy_alibaba

一键复制阿里巴巴矢量图标库SVG图标，无需下载

阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。

苦于每次想要使用图标库的图标都需要下载图标===拉到文件夹====写文件路径/////或者是需要下载svg 后在经过啰嗦的复制粘贴才能放在项目上用。

追求效率的SP怎么可能容忍这种低效率的操作！！！！！！！

果断撸一段小脚本试试水，想不到效果好不错。

一、试水工具

本次小试水使用了著名的userscript 插件： tempermonkey

打开chrome 浏览器,地址栏输入：chrome://extensions/ 进入谷歌浏览器插件安装

把mxclass_com_Tampermonkey_chrome插件.crx 文件拖拽到浏览器，自动安装插件

安装插件后，把copy_alibaba.js中的脚本文件全

Draw.io用阿里云3D矢量图标库-2022大数据

06-19

Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制](https://blog.csdn.net/weixin_44479533/article/details/131289488)

1 条评论

您还未登录，请先

后发表或查看评论

阿里矢量图在线引入使用步骤

qq_46372132的博客

07-13

165

一定要带上iconfont类名，后面的类名是你所使用的图标类名。在需要的文件中使用图标 class=“图标类名:在我的项目中添加了复制即可用。4.完成 ,在页面上就可以显示图标了。2.在项目引入这两个链接。

阿里矢量图标的三种使用方式整理（uniapp）

时翎的博客

02-11

1万+

iconfont-阿里巴巴矢量图标库

web端iconfont使用

引用方式：

1.unicode 引用（不支持多色，支持按字体的方式去动态调整图标大小，颜色）

2.font-class 引用（unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的）

3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式）

兼容性 unicode >...

各种icon图标（阿里巴巴矢量图）

moyan的博客

08-13

2686

http://www.iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.RGM5pd

iconfont-阿里巴巴矢量图标库使用教程

张时贰的博客

12-27

1万+

iconfont-阿里巴巴矢量图标库使用教程

文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果

一、前言

iconfont-阿里巴巴矢量图标库

矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点：

阿里妈妈字体图标Iconfont的使用方法

m0_59812088的博客

11-27

2133

（2.1） iconfont类：基本样式，包含字体的使用等。(2.2) icon-xxx：图标对应的类名。2. IconFont网站上传图标，下载使用。通过Unicode编码方式使用字体图标步骤。1、引入样式表：iconfont.css；2、复制粘贴图标对应的Unicode编码；2、调用图标对应的类名，必须调用2个类名。2、浏览本地图标→ 去除颜色提交；同时我们也可以查看到字体图标的。使用字体图标有两种方式，通过。1、上传→ 上传SVG图标；1、引入字体图标样式表;通过类名使用字体图标步骤。

阿里妈妈矢量图的使用

dxj124的博客

07-17

1598

阿里妈妈：https://www.iconfont.cn/home/index

1.现在图标库中选中图标，添加到购物车

2.选择好了需要的图标以后，进入到购物车，然后

选择添加至项目---》选择项目目录(也可新建一个项目目录）---》然后选择定

3.点击下载至本地

下载后，将下载目录中的iconfont.css，放在我们的项目目录中

注意小程序中的使用：使用的...

阿里妈妈字体图标（iconfont）使用介绍

热门文章

学成在线网页制作（详细）

23418

阿里妈妈iconfont矢量图标的使用方法(超详细)

22156

GitHub 详细使用【详细】

20870

less安装教程【详细】以及使用

16023

JS 本地储存【详细】

9775

分类专栏

面试

1篇

Vue

5篇

微信小程序

1篇

解决一些头疼的问题

5篇

JavaScript

36篇

Git/Github

2篇

Node

3篇

计算机网络

1篇

CSS

21篇

移动端开发

5篇

HTML

13篇

1篇

VScode

1篇

个人资料

前端路线

1篇

最新文章

web前端面试题

Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】

微信小程序父子组件之间传值

2022年30篇

2021年53篇

分类专栏

面试

1篇

Vue

5篇

微信小程序

1篇

解决一些头疼的问题

5篇

JavaScript

36篇

Git/Github

2篇

Node

3篇

计算机网络

1篇

CSS

21篇

移动端开发

5篇

HTML

13篇

1篇

VScode

1篇

个人资料

前端路线

1篇

被折叠的条评论

为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

祝福语

请填写红包祝福语或标题

红包数量

个

红包个数最小为10个

红包总金额

元

红包金额最低5元

余额支付

当前余额3.43元

前往充值 >

需支付：10.00元

取消

确定

下一步

知道了

成就一亿技术人!

领取后你会自动成为博主和红包主的粉丝

规则

hope_wisdom 发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额

抵扣说明：

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

余额充值