B2 PRO主题-全站使用阿里巴巴ICONFONT图标详细图文教程

ICONFONT-阿里巴巴矢量图标是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。可以使用GitHub帐号登录，数百万的图标免费使用，官方也提供了详细的教程

一、新建Iconfont项目

接下来我们就一步一步的教大家如何在使用阿里巴巴Iconfont图标

注册好iconfont的帐号，登录之后你就可以寻找自己需要的图标啦

首先呢，寻找自己的需要的图标，通通点进购物车！

再把购物车的图标加入到项目，如果还未创建项目，那就新建一个就是了

二、网站集成

使用 Iconfont图标 图标官方也有详细的教程，同时官网提供三种集成方式：Unicode、Class、Symbol。这三种集成方式各有优劣势，具体请查看官方教程

这里B2主题最好使用 Class 的方式集成到网站中

第一步：将刚刚新建的项目生成 Class 接入链接，并复制

把这里复制过来的css链接加入B2的自定义头部HTML里

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4861770_sznr3sag0d.css">

href里面换成你自己搜集的css就行

然后选中自己喜欢的图标，点复制代码。

再检查一下这个项目的属性

那这个图标的地址就是

<i class="swordgo swordgo-dianpu"></i>

其中swordgo-dianpu就是你复制过来的图标的代码

打开菜单设置

把这段代码放到菜单名称前面就可以了。

进阶功能

如图

菜单设置代码如下

<span class="swordgo-blue"><i class="swordgo swordgo-jiangzhang"></i> 授权中心</span>

本站提供三种样式，分别是swordgo-red，swordgo-blue，swordgo-yellow