WordPress知更鸟主题使用阿里云图标方法

  • A+
所属分类:WordPress

博主的知更鸟主题5.2版本,使用的是阿里巴巴矢量图标库(Iconfont)。

与之前使用的 Font Awesome图标,有绝对的优势:

图标字体多

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

按需使用

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

可以外链字体库

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

介绍完阿里巴巴矢量图标库的优势,下面开始具体使用方法:下面所有提到be的改成zm就行了,如果继续使用be,右下角的QQ在线图标会失效,变成其他的。鸟哥修改了这个BUG。

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

阿里巴巴矢量图标库

目前只支持GitHub(同时这个账号也是微信提醒有新评论的“杏酱”账号)和新浪微博账号授权登录。

二、新建图标库项目

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

WordPress知更鸟主题使用阿里云图标方法

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

需要注意是:

FontClass/Symbol 前缀和Font Family两项中必须输入:zm,前后不能有空格。如图:

WordPress知更鸟主题使用阿里云图标方法

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

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

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

WordPress知更鸟主题使用阿里云图标方法

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

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

WordPress知更鸟主题使用阿里云图标方法

点击生成代码:

WordPress知更鸟主题使用阿里云图标方法

四、加载外链图标字体库

复制代码:

WordPress知更鸟主题使用阿里云图标方法

进入begin主题选项→辅助功能选项卡,将复制的图标字体库链接添加到主题选项中:

 

WordPress知更鸟主题使用阿里云图标方法

最后不要忘记保存一下主题设置。外链字体库支持https主题已添加。

如果再次添加图标,重复上面的步骤。

五、给菜单项目添加图标字体

添加图标字体需要将菜单高级属性打开,登录WP后台→外观→菜单,进入菜单编辑管理页面,打开右上角的”显示选项“,勾选其中全部的“模块”和所有高级菜单属性,如图:

WordPress知更鸟主题使用阿里云图标方法

返回已建好的图标字体库页面,用鼠标复制图标代码,例如:zm-twitch1

添加到菜单项目的CSS类中,前面必须加一个zm,最终如:zm zm-twitch1,如图:

WordPress知更鸟主题使用阿里云图标方法

最后不要忘记保存菜单。

正常主题只有菜单可以添加图标字体,漂亮的图标,会吸引浏览者去点击。如果动手能力强,你也可以修改主题模板文件,替换添加主题默认的图标字体。

Iconfont图标字体,有个问题就是图标字体大小不一,同一个字体库的也是如此,还好Iconfont提供了非常方便的编辑工具,可以自己调整大小、旋转等编辑操作。

注:由于Iconfont图标图标库众多,很多图标字体的代码名称都是相同的,可能会与主题默认的图标冲突,如果添加自定义图标后,发现某个图标显示为另外的其它的图标,就需要修改自定义图标代码名称:

其中Unicode(16进制)代码,比如下图这个图标的Unicode代码 e636,就与主题默认的新浪微博的图标相同随便改一个,但必须是字母e开头6以后的数字四个数字和字母组合,如图:

WordPress知更鸟主题使用阿里云图标方法

不要把胡乱地把一些图标都弄到字库中项目中,使用哪个就添加哪个,不然会引起更多的字体名称冲突,而且会在一定程度上影响加载速度。

每次添加或者编辑了图标名称不要忘记点击“更新代码”,并把新的字库链接重新添加到主题选项中。

 

阿里巴巴在线图标工具,操作非常简便,上面的说明很长,其实使用很简单,只是为刚接触的用户起到引导作用,也可以制作自己的字体图标并上传到该站上使用。

当然如果你还是喜欢用Font Awesome图标,可以安装 Font Awesome 4 Menus 插件,之前设置的图标不会变,两者没有冲突。

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:15   其中:访客  8   博主  7

    • 杰森 杰森 1 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省合肥市 鹏博士长城宽带

      求问 为什么我的设置了以后 图标在上面 分类文字却在下面显示呢

        • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.123 Mobile Safari/537.36 中国 移动

          @杰森 你用的知更鸟主题是破解版吧。他们反应破解的就是这样上下不在一行。可能有地方没有完全破解了。

            • 杰森 杰森 1 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省合肥市 鹏博士长城宽带

              @BG4PGR 是的 刚做博客 怕用不好 就先网上找了一个试试功能 原来是这样啊 谢谢啊

                • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.123 Mobile Safari/537.36 中国 移动

                  @杰森 你先用破解的练练手。我也是小白,一步步走过来的。熟练以后买个正版的。正版的又加了很多功能,我也想再买一个正版。

            • 免费pos机 免费pos机 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省长沙市 电信

              看了很多方法,有加zm的 有加be的 有随便加 ma 的 ,不过教程加完后生成的代码前缀都会带上zm、be之类,我是随便加什么都没有前缀,也不知道是不是破解版的问题,5.2版

                • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 中国 移动

                  @免费pos机 按照知更鸟作者的说法,5.2版的使用阿里云图标,所以用 zm 。网上流传的破解版除了5.2,就是4.6了。4.6使用Font Awesome图标,所以就用 be 前缀。破解版使用阿里云图标,可能效果不太好,有的说会显示错位。至于阿里云图标前缀 zm 还是 ma ,应该都可以吧?遵从作者,星光使用了 zm 前缀。

                • southcat southcat 1 来自天朝的朋友 谷歌浏览器 Windows 10 山东省青岛市 联通

                  添加之后文字在下面 图标是一个方框怎么解 改了很多东西都不行

                    • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省潍坊市 联通

                      @southcat 用的破解版知更鸟吧?度娘看看去,有没有解决办法

                      • southcat southcat 1 来自天朝的朋友 谷歌浏览器 Windows 10 山东省青岛市 联通

                        @southcat 正版知更鸟 FontClass/Symbol 前缀的zm改成zm-然后就好了。。。

                          • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省青岛市 联通

                            @southcat 前缀是要用zm表示,文章里有说明的。

                        • 05o 05o 0 来自天朝的朋友 火狐浏览器5.0 Windows 7 北京市 北京宽带通电信技术有限公司

                          好文章!666,学习了

                          • 老火 老火 1 来自天朝的朋友 谷歌浏览器 Windows 10 云南省文山州 电信

                            按操作来,为什么什么反应都没有,累哭

                              • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省青岛市 联通

                                @老火 知更鸟要用正版的

                                  • 老火 老火 1 来自天朝的朋友 QQ浏览器  Redmi 6 Build/O11019 云南省文山州 电信

                                    @BG4PGR 是用的正版

                                      • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 中国 移动

                                        @老火 版本没问题就再理顺下操作方法。教程来源知更鸟官网,去那里看看吧。阿里云图标先要注册添加收藏后才能用到主题里面