B2主题添加阿里巴巴图标库（iconfont）小图标的教程

教程开始

第一步：注册并登录

我们访问iconfont官网（https://www.iconfont.cn/），单击右上角的登录

登录支持“github”和“新浪微博登录”，这一步很简单，我不再赘述

第二步：创建项目

登录成功后，我们点击菜单栏的“资源管理-我的项目”

然后我们点一下“创建项目图标”

然后在创建项目弹窗界面，填入相关的信息

1. 项目名称：如果你有好几个项目，那么项目名称就是为了区分不同的项目，可以自定义填写
2. 项目描述：和字面意思一样，可以不填
3. FontClass/Symbol 前缀：这个很重要，后面我们会用到，我们用的是B2主题，所以，我们把这个改为“b2-”
4. Font Family:这个也很重要，后面我们会用到，建议我们B2主题都改为b2（注意：Font Family的名字不要用b2font，这个名字回和B2主题自带的图标库冲突，建议用b2font之外的其他名字）
5. 字体格式:建议全部选上

最后填完的效果如下,如果这一步你有点迷惑，那你直接照着我的这个图设置即可

所有信息都填好后，我们点击“新建”，新建完成后，可以看到，我们的图标库是空的，接下来就是要把小图标添加到我们自己的项目

第三步：添加图标至项目库

iconfont提供了丰富的图标库供我们选择，在菜单栏我们可以看到，有官方图标库、多色图标库、单色图标库、所有图标库等等，我们可以点击进去，选择自己喜欢的小图标。

当然 ，你也可以通过搜索快速定位你需要的小图标，比如我们搜索“wordpress”,可以看到有很多小图标，我们选择自己喜欢的小图标，将鼠标移到上面，然后点击“添加入库”

接着，我们点击右上角的“购物车”图标

点击添加至项目，选择我们刚创建的项目库，最后点击确定


这样，我们的图标就添加完成了

第四步：获取图标代码

我们返回到我们的项目库，即可看到刚添加的图标，然后点击“刷新代码”

第五步：将iconfont代码引入B2主题

我们进入B2主题后台，点击B2主题设置-常规设置，在“头部HTML标签”里面粘贴以下代码

<link rel="stylesheet" href="这里替换成你的图标库代码">

比如我的图标库代码是//at.alicdn.com/t/font_2550752_irw4gvx6j8.css，那么我在“头部HTML标签”里面填入的就应该是<link rel="stylesheet" href="//at.alicdn.com/t/font_2550752_irw4gvx6j8.css">

填好后的效果就是这样的

填写好后，我我们点击保存。

第五步：添加iconfont小图标至菜单

图标库已经引入了B2主题，那么现在我们就可以把小图标添加到自己网站的菜单了

我们进入自己的图标库，先复制图标代码

复制好代码后在菜单前面添加如下标签：
<span class=”你的Font Family 替换成图标代码”></span>
或
<i class=”你的Font Family 替换成图标代码”></i>
这两种都是可以的，比如你的你的Font Family是b2，然后图标代码是b2-wordpress
那么，你填入菜单的标签就是<span class=”b2 b2-wordpress”></span>
或者是<i class=”b2 b2-wordpress”></i>

添加完成后，我们点保存，回到首页即可看到菜单前面多了个小图标

第六步：更新图标

如果添加完成后，我们觉得图标不够完成，想替换或者新添加一些，那么每次添加完小图标，我们都要更新图标库的代码

点击更新后我们只需要将新生成的代码粘贴到B2主题设置-常规设置，在“头部HTML标签”里面

<link rel="stylesheet" href="每次更新需要替换的部分">