前言
网上有很多矢量图标库，但可定制的很少，不能定制的就浪费了。阿里巴巴的矢量图标库Iconfont可以帮助您解决这个问题。它允许您自定义添加到已定义项目的图标，并且非常易于使用。
选择图标
打开阿里巴巴矢量图标库首页，您可以在其中选择您想要的并进行组合，如下图所示。
如何使用阿里巴巴矢量图标库Iconfont
选择要添加到库中的特定图标
如何使用阿里巴巴矢量图标库Iconfont
单击右上角的库可以查看添加到库中的图标并将它们添加到您的项目中。您也可以直接下载，只需点击下载素材，选择颜色和格式（SVG、AI、PNG）即可完成下载。
如何使用阿里巴巴矢量图标库Iconfont
添加到项目后，可以在图标管理=我的项目中看到添加的图标。
如何使用阿里巴巴矢量图标库Iconfont
运用到项目
如何使用阿里巴巴矢量图标库Iconfont
统一码参考
Unicode 是在网页上应用字体的最原始的方式。其特点是：
最佳兼容性，支持IE6及以上版本以及所有现代浏览器。支持根据字体动态调整图标大小、颜色等。但是，由于它是一种字体，因此不支持多种颜色。只能使用平台内的纯色图标。即使您的项目中有多个彩色图标，颜色也会自动删除。注意：较新版本的iconfont 支持多色图标。我们建议您在适当的时候对这些多色图标使用符号引用方法。
使用Unicode 的步骤如下：
第一步：将生成的fontface复制到自己项目下（将自己项目下的fontface复制到本地项目的样式文件中，不是下面的代码）
@font-face { font-family: 'iconfont' /* 项目ID 703892 */src: url('//at.alicdn.com/t/font_703892_u8zob8nchpf.eot'); /t/font_703892_u8zob8nchpf.eot?#iefix')格式（'嵌入-opentype'），url（'//at.alicdn.com/t/font_703892_u8zob8nchpf.woff'）格式（'woff'），url（'//at.alicdn.com/t/font_703892_u8zob8nchpf.ttf ') format('truetype'), url('//at.alicdn.com/t/font_703892_u8zob8nchpf.svg#iconfont') format('svg');}第二步：使用iconfont 定义样式（将其添加到您的本地项目的样式文件）。
.iconfont{ font-family:'iconfont' ! important; font-style: antialiasing -webkit-text-行程宽度： 0.2px;第三步：选择对应的图标，获取字体编码并添加到页面应用中。
i class='iconfont'/ifont-class 参考
字体类是Unicode 的一种使用方式，主要解决Unicode 书写不直观、语义不清晰的问题。
与使用Unicode相比，它具有以下特点：
兼容性强，支持ie8+及所有现代浏览器。与Unicode相比，它的语义更清晰，书写起来也更直观。很容易看出这个图标是什么。类用于定义图标，因此如果要替换图标，只需更改类中的Unicode 引用即可。但是，由于仍在使用字体，因此尚不支持多色图标。以下是使用font-class 的步骤：
步骤1：将生成的fontclass代码复制到您的项目下（参见阿里巴巴图标库项目-font-class路径到本地HTML顶部）。
//at.alicdn.com/t/font_703892_u8zob8nchpf.css 第二步：选择对应图标，获取类名，应用到页面（icon-xxx为具体图片类名。阿里巴巴图标库项目-font (参见-class)
如何使用阿里巴巴矢量图标库Iconfont
i class='iconfont icon-xxx'/i
符号参考
这是一种全新的使用方式，也是主流且目前推荐的平台使用方式。相关介绍请参见这篇文章。在实际应用中，这种用法与上面两种相比有以下特点：
现在支持多色图标，不再局限于单一颜色。它支持通过多种技术调整字体大小和颜色等样式。兼容性低，支持ie9及更新的浏览器。浏览器svg渲染性能一般，不如png。使用流程如下。
步骤1：将生成的符号代码复制到您的项目下（参考阿里巴巴图标库项目符号路径到您本地HTML的顶部）。
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js第2步：添加通用CSS代码（只需部署一次）
.icon { width: 1em; height: 1em;vertical-align: -0.15em; fill: currentColor; 第三步：选择对应的图标并应用到页面
svg class='icon' aria-hidden='true' use xlink:href='#icon-xxx'/use/svg 您将能够在未来的项目中使用矢量图标，阿里巴巴提供了多种不同的类型。任何人都可以选择使用它，而且都是免费的。
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。