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

释放双眼,带上耳机,听听看~!

教程开始

第一步:注册并登录

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

登录支持“github”和“新浪微博登录”

第二步:创建项目

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

 

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

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

    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>

    结束.

给TA买糖
共{{data.count}}人
人已赞赏
教程

各大MACCMS采集资源站网址合集(2021年最新)

2021-9-19 1:44:38

教程

阅读|书源分享

2021-9-21 5:47:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索