网站图标接入使用阿里巴巴矢量图标库教程

前几天不是刚入手了一个zblog的资源下载类主题Downlee，然后在做相关配置的时候发现奥森图标没办法配置，问了一下作者，原来是需要使用阿里巴巴矢量图标库，说起阿里巴巴矢量图标库，不得不称赞一下很牛逼，图标全，样式多，使用方便简洁，所以泽以今天就唠叨几句如何去帮助网站接入使用阿里巴巴矢量图标！

1.先去阿里巴巴矢量图标库官网注册账号：

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

当然，如果你有账号直接登录就可以，不过这里给出了三种的登录方式：

一般使用微博登录比较方便，当然你有github账号也可以！

2.搜索图标并加购（免费的）

选择自己中意的图标，加购，有个购物车的小图标哈

加购之后进入购物车：

然后把图标添加至项目，这里项目需要新建一个,选择新建项目，输入名称“icon”（名称随意）点击确定，如图：

添加好之后界面会跳转至项目管理，左侧是项目名称，右侧是图标类型有“Unicode”、“Font”和“Font classSymbol”三种，我们选择如图“Font class”，然后点击“暂无代码，点此生成”

这里注意一下，如果你找不到：暂无代码，点击生成，是因为你没有展开在线链接：

然后生成之后，会得到一个相应的链接（非常重要！）

重点：编辑项目

点击右上角编辑项目：

因为FontClass前缀必须使用“font-”，然后Font Family设置“icon”，如图，否则前缀不一样无法使用图标，如图设置：

之后点击保存按钮，然后项目首页会提示“下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式”，点击此提示更更新代码。

特别提示：每次添加图标之后都会需要点击此处生成一个新的样式代码。

3.网站接入链接并引用图标

首先，需要把获取到的样式代码放到你需要调用的网站的heard模板meta标签里面，然后再在网站相应部位引用即可！

引用的格式如下：

<link href="阿里巴巴图标代码" rel="stylesheet">

然后调用阿里巴巴图标代码你在阿里巴巴矢量图标库进行复制代码获取：

复制代码获取到的为这种：font-code

但是在调用的时候，必须在前面加上icon，因为icon是固定的，所以正确的调用格式为：icon font-code

网站中引用格式为：

<i class="icon font-delicious"></i>

总结步骤：

在阿里巴巴图标图新建一个项目，名称随意，FontClass/ Symbol 前缀设置“font-”，Font Family设置“icon”，每次添加新图标都需要更换一个css代码，把最新的样式代码，放在网站的头部接口了，就可以了，最后把图标的唯一代码复制，粘贴在需要显示图标的位置就可以了。

PS：重中之重就是设置好前缀和family的名称，必须跟教程一样，否则设置了也不会显示！