后退
榜单
首页>帮助中心>新手教程>B2 PRO主题-全站使用阿里巴巴ICONFONT图标详细图文教程

需要支持?

如果通过文档没办法解决您的问题,请提交工单获取我们的支持!

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

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

一、新建Iconfont项目

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

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

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

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

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

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

二、网站集成

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

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

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

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

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

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

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

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

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

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

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

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

那这个图标的地址就是

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

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

打开菜单设置

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

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

进阶功能

如图

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

菜单设置代码如下

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

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

0 条回复 A文章作者 M管理员
夸夸
夸夸
还有吗!没看够!
    暂无讨论,说说你的看法吧
个人中心
购物清单
优惠代劵
今日签到
有新私信 私信列表
快速搜索
联系客服
关注我们
  • 扫码打开当前页