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

  • 阿里巴巴矢量图标库iconfont是由用户自己制作上传所组成的一套图标库
    #我能用阿里巴巴矢量图标库做什么?
  • 在iconfont的官方文档中提供了三种使用途径
  1. Web端使用
  2. Android端使用
  3. IOS端使用

QQ截图20211004012930.jpg
QQ截图20211004012930.jpg

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

iconfont素材版权说明(官方)

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

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

Web端

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

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

20211004015012.jpg
20211004015012.jpg

20211004015123.jpg
20211004015123.jpg

在下载页你还可以将图标更改成自己喜欢的颜色,以及修改图标大小
20211004015224.jpg
20211004015224.jpg

有三种格式可供下载,分别是svg,ai,png
直接下载使用,我们就选择png格式下载就好了

2.网页设计中使用

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

①unicode 引用

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

  • 优点:可以按字体形式动态调整图标大小和颜色,兼容ie6以上所有浏览器。
  • 缺点:不支持多色。
unicode使用方法
第一步:拷贝项目下面生成的font-face

20211004021626.jpg
20211004021626.jpg

第二步:定义使用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>

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

20211004021315.jpg
20211004021315.jpg

例如该图标的编码为&#xe624;

②font-class 引用

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

  • 优点:语意明确,书写更直观,兼容性ie8以上所有浏览器;当要替换图标时,只需要修改class里面的unicode引用。
  • 缺点:与unicode相同,不支持多色。
font-class使用方法
第一步:拷贝项目下面生成的fontclass代码:

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

20211004021908.jpg
20211004021908.jpg

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

20211004022150.jpg
20211004022150.jpg

③symbol 引用

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

  • 优点:支持多色图标,可以向字体一样调整样式。
  • 缺点:兼容性相比于前两种比较差,兼容ie9以上浏览器,浏览器渲染svg的性能一般,还不如png。
symbol使用方法
第一步:拷贝项目下面生成的symbol代码:

20211004022719.jpg
20211004022719.jpg

第二步:加入通用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帮助中心!