iconfont 阿里巴巴矢量图标库使用方法

 原文链接：ECHK1NG's 学习之路

什么是阿里巴巴矢量图标库iconfont？

• 阿里巴巴矢量图标库iconfont是由用户自己制作上传所组成的一套图标库 #我能用阿里巴巴矢量图标库做什么？

• 在iconfont的官方文档中提供了三种使用途径

1. Web端使用

2. Android端使用

3. IOS端使用

• 与之前文章中介绍的Font Awesome（『Font Awesome』📚安装教程 为你的网站增加一点有趣的元素）功能类似，但在我看来iconfont相比于Font Awesome有过之而无不及。 首先iconfont内图标数量已经达到了165,767,60个，远超Font Awesome的675个图标

  

  其次是iconfont有很多种使用方式，总有一种适合于你 tip：iconfont图标的使用不能超过其允许范围，商业用途需要得到作者授权，更不可直接将图标用于售卖

iconfont素材版权说明（官方）

该素材仅供广大用户交流学习使用，未经iconfont或其关联公司书面授权许可，不得用于任何商业用途。 若希望使用该素材，请提前联系作者，取得授权后再进行使用，避免造成侵犯作者知识产权。

如何正确使用阿里巴巴矢量图标库iconfont？

Web端

1.直接下载单独图标使用

例如在iconfont搜索栏输入博客，选择想要的图标，点击下载

在下载页你还可以将图标更改成自己喜欢的颜色，以及修改图标大小 有三种格式可供下载，分别是svg，ai，png 直接下载使用，我们就选择png格式下载就好了

2.网页设计中使用

iconfont官方提供了三种使用方法 具体可以查看iconfont帮助中心

①unicode 引用

顾名思义，unicode就是以文字的形式来引用iconfont图标

• 优点：可以按字体形式动态调整图标大小和颜色，兼容ie6以上所有浏览器。

• 缺点：不支持多色。

unicode使用方法

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

第二步：定义使用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">&#x33;</i>

把想要使用的图标添加入库后就可以带仓库查看到其字体编码

例如该图标的编码为

②font-class 引用

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

• 优点：语意明确，书写更直观，兼容性ie8以上所有浏览器；当要替换图标时，只需要修改class里面的unicode引用。

• 缺点：与unicode相同，不支持多色。

font-class使用方法

第一步：拷贝项目下面生成的fontclass代码：

在我的项目中选择Font Class，点击生成链接

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

③symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是iconfont官方目前推荐的用法。

• 优点：支持多色图标，可以向字体一样调整样式。

• 缺点：兼容性相比于前两种比较差，兼容ie9以上浏览器，浏览器渲染svg的性能一般，还不如png。

symbol使用方法

第一步：拷贝项目下面生成的symbol代码：

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

Android和iOS 使用

• 这两种使用方法建议查看iconfont帮助中心

本文引用地址：iconfont帮助中心!