wordpress站点阿里巴巴图标库iconfont使用方法-b2美化

主题换用阿里巴巴矢量图标库(Iconfont),与之前使用的 Font Awesome图标,有绝对的优势:

图标字体多

目前Iconfont大概有一百三十多万个,而Font Awesome只有600多,让你有更多的选择。

按需使用

Font Awesome不论你使用几个图标字体,都需要完整加载字体库(1M多),而Iconfont可以按你所需定制图标字体库,并且可以根据你的需要随时更改,目前主题必须的字体图标库只有100多K。

可以外链字体库

使用Iconfont图标字体,不一定要在本地加载,可以直接将生成的字体链接添加到主题中。

介绍完阿里巴巴矢量图标库的优势,下面开始具体使用方法:

加密的内容:

一、首先登录阿里巴巴矢量图标库

阿里巴巴矢量图标库

目前支持GitHub和新浪微博账号授权登录,也可以手机号注册。

二、新建图标库项目

登录后,点击上面菜单中的图标管理→我的项目,点新建项目图标新建一个图标项目:

在弹出的窗口中输入相关信息,项目名称任意。

需要注意是:

FontClass/Symbol 前缀和Font Family两项中必须输入:zm,当然,你也可以改成其他的,本站用的是hg和icon,那么应用于页面的时候就是<i class="hg icon-xxx"></i>如图:

三、向图标项目中添加图标

点击菜单上的图标库,进入一个图标库(注:主题支持多色图标)。

用鼠标选择一个图标并点击上面的购物车图标,将图标添加到临购物车中,如图:

已添加过的图标,会有个虚线框提示,右上角购物车图标上的数字,是在购物车中待添加到项目中的图标个数。

选择添加完图标,点击右上角的购物车图标,将添加在购物车中的图标添加到相应该项目中:

点击生成代码:

四、加载外链图标字体库

复制代码:

进入b2主题的头部html标签,将复制的图标字体库链接添加进来:

<link rel="stylesheet" href="//at.alicdn.com/t/font_3002041_gt0pqnn0yaw.css">
<script type="text/javascript" src="//at.alicdn.com/t/font_3002041_gt0pqnn0yaw.js"></script>

五、给菜单项目添加图标

外观-菜单

代码如下

<span class="hg icon-qianbao">B2案例</span>

这样菜单前面会多一个图标,icon-qianbao就是你加购物车后添加到项目里的图标。

给TA打赏
共{{data.count}}人
人已打赏
WP修改

b2主题中添加网页标题崩溃欺骗搞怪特效标题崩溃特效

2021-12-10 23:08:52

WP修改

修改wordpress全站字体及本站所用字体下载

2022-1-4 11:09:11

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ1811170520 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧