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

之前一直想给B2的菜单添加阿里巴巴图标库(iconfont)的小图标,全网找了很多教程,都没有适合B2的,于是,这两天就自己研究,终于把添加iconfont小图标的方法弄清楚了,今天就给大家分享下B2主题添加iconfont小图标的方法,本方法原则上适用于wordpress的所有主题。

最终效果演示

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

imgSpider 采集中…
imgSpider 采集中…
imgSpider 采集中…

教程开始

第一步:注册并登录

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

imgSpider 采集中…

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

imgSpider 采集中…

第二步:创建项目

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

imgSpider 采集中…

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

imgSpider 采集中…

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

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

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

imgSpider 采集中…

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

imgSpider 采集中…

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

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

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

imgSpider 采集中…

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

imgSpider 采集中…

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

imgSpider 采集中…
imgSpider 采集中…

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

第四步:获取图标代码

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

imgSpider 采集中…
imgSpider 采集中…

第五步:将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">

填好后的效果就是这样的

imgSpider 采集中…

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

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

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

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

imgSpider 采集中…

复制好代码后在菜单前面添加如下标签:
<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>

imgSpider 采集中…

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

imgSpider 采集中…

 

第六步:更新图标

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

imgSpider 采集中…

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

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

到此,为B2主题添加小图标的教程写完了,本教程是可汗网原创,转载请注明出处。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
徐闹闹 » B2主题添加阿里巴巴图标库(iconfont)小图标的教程

提供最优质的资源集合

立即查看 了解详情