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

点击阅读全文

最终效果演示

教程开始前,我给大家看一下最终的效果,看了后你再决定要不要学

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

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

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

教程开始

第一步:注册并登录

我们访问iconfont官网(https://www.iconfont.cn/),单击右上角的登录

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

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

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

第二步:创建项目

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

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

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

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

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

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

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

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

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

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

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

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

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

当然 ,你也可以通过搜索快速定位你需要的小图标,比如我们搜索“wordpress”,可以看到有很多小图标,我们选择自己喜欢的小图标,将鼠标移到上面,然后点击“添加入库”
B2主题添加阿里巴巴图标库(iconfont)小图标的教程
接着,我们点击右上角的“购物车”图标

B2主题添加阿里巴巴图标库(iconfont)小图标的教程
点击添加至项目,选择我们刚创建的项目库,最后点击确定
B2主题添加阿里巴巴图标库(iconfont)小图标的教程
B2主题添加阿里巴巴图标库(iconfont)小图标的教程
这样,我们的图标就添加完成了

第四步:获取图标代码

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

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

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

[content_hide]

我们进入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">

填好后的效果就是这样的

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

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

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

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

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

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

复制好代码后在菜单前面添加如下标签:
<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主题添加阿里巴巴图标库(iconfont)小图标的教程

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

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

 

第六步:更新图标

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

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

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

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

                       
上一篇 2021-06-28 03:41
下一篇 2021-07-02 07:29