关于【阿里巴巴矢量图标怎么使用】，阿里矢量图标怎么使用，今天常识编辑棒棒子给您分享一下，如果对您有所帮助别忘了关注本站哦。

内容导航：1、阿里巴巴矢量图标怎么使用：找不到素材？来看看阿里巴巴矢量图标库的正确打开方式2、阿里巴巴矢量图标怎么使用，阿里矢量图标怎么使用1、阿里巴巴矢量图标怎么使用：找不到素材？来看看阿里巴巴矢量图标库的正确打开方式

大家好呀，我是嘀哩~

在我们看各种PPT教程的时候，基本所有的作者都会告诉你：做PPT要多使用矢量图标，矢量图标可以让PPT变得更生动。

而且基本上都会给你推荐一个网站：

Iconfont阿里巴巴矢量图标库

网址：https://www.iconfont.cn/

但是他们都只告诉你可以在这网站下载图标，但没有告诉你，怎么把这个宝藏网站给用好。

鄙人不才，刚好和这个网站打过几年交道，下面我就来和大家分享一下我使用这个网站多年的心得吧~

我们最常用的方式就是直接在上面搜索关键词，比如说【设置】

但是我们发现这些搜索出来的图标都很千篇一律，在一堆普通的图标里找到好看的图标实在是很不容易！

现在我就来教你怎么样在这个网站里找到精致又好看的图标。

方法一

首先，我们在搜索关键词后，将图标类型改为精选图标、多色图标和“精美”

这时我们可以发现搜索出来的图标都是非常好看的了。

但是这样还没完，我们点击一个自己喜欢的图标，进入到图标下载页面后看到右边有一行蓝色的字, 所属的图标库下方的【工程物理学彩色图标】

点击进去后就可以看到有一整套风格一致，设计精美的图标。

此时就可以完美的运用到PPT当中了，比如说用在目录页，就可以让PPT的风格更加统一且精美。

用在内容页，可以烘托氛围，填补页面空缺，还起到很好的装饰作用

如果觉得很喜欢这些图标，但是暂时还用不到，怎么办呢？

并不需要麻烦地将它们一个个下载下来，只需要点击右侧的收藏按钮

或者在选中图标时，点击中间的收藏按钮，就可以收藏到你的收藏夹里啦~

以后我们想找自己收藏的图标的时候，只需点击上方的图标管理，再点击我的收藏，

就可以看到自己所收藏的图标和图标库啦！是不是超级方便超级完美~

方法二

我们直接点击上方的【图标库】，再点击【多色图标库】

可以看到这里面有很多非常好看的图标了

当然可能你觉得还不够好，再点击右边的排序方式，点击按点赞数排序，

此时，新世界的大门打开了！发现了一大波设计精良的图标！

用于PPT可以有这样子的效果噢~

除此之外不仅有表情包、精致的插画、还有各大银行的LOGO，而且还是可以任意修改颜色的矢量LOGO！

而且各大品牌的LOGO也都安排上了，简直不要太好用！

我们看到这么多好看的图标，如果都想要下载该怎么办呢？

一个个点太麻烦了，可以将鼠标移动到图标上，选择将图标放入购物车

然后不带一丝犹豫且潇洒地清空购物车，毕竟不花一分钱就能清空购物车，还是头一回。

不愧是阿里巴巴的图标库，下载个图标都能让我们享受到淘宝购物清空购物车的快乐。

以上就是我对Iconfont阿里巴巴矢量图标库的使用心得啦~

2、阿里巴巴矢量图标怎么使用，阿里矢量图标怎么使用

官网首页

介绍

iconfont：阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

不同风格图标

初级使用方式

如果你只是单纯的想使用少量的图标或者是下载，那么很简单，iconfont提供图标类型，图标大小和颜色风格供用户选择，点击下载就可以了，这个小图标可以用于微信小程序等任何前端代码中。

高级使用方式

更高级的用法是选择自己喜爱的图标加入购物车（如图），然后点击购物车，可以查看自己添加的图标，并且可以选择下载素材，下载代码和添加至项目。这里重点来讲讲添加至项目，项目是自己创建的，可以添加管理项目成员，像同一个项目的开发人员就可以一起加入都这里。并且用户也可以上传自己设计的图标，一同管理。

加入购物车

添加至项目

项目图标管理

接下来看看如何将图标引入到项目中，以下说明来自官方文档教程：

unicode引用

---

unicode是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');}

第二步：定义使用iconfont的样式.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 class="iconfont">3</i>

font-class引用

---

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：<i class="iconfont icon-xxx"></i>

symbol引用

---

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。兼容性较差，支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般，还不

噼里啪啦一顿牛皮的内容分享完毕，记住关键词：阿里巴巴矢量图形，阿里巴巴矢量图标怎么使用视频，阿里巴巴矢量图标素材库，阿里巴巴矢量图标素材库免费，阿里巴巴矢量图标怎么使用的。