WordPress如何使用阿里巴巴图标库图标

作者 : 去看你博客 本文共876个字,预计阅读时间需要3分钟 发布时间: 2018-09-16 共1.72K人阅读

不知道大家有没有注意到“去看你博客”导航栏文字前都带有一个小小的图标!有人问怎么去实现这个效果,今天给大家写一篇关于WordPress如何使用阿里巴巴图标库图标的文章,用于美化自己的博客!

效果图

使用Iconfont可以按你所需定制图标字体库,并且可以根据你的需要随时更改,非常的方便快捷!

开始我们的教程:

首先登陆阿里巴巴矢量图标库

阿里巴巴矢量图库

目前只支持GitHub和新浪微博账号授权登录(没有可以自行注册 :mrgreen:

新建图标库项目

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

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

需要注意是:

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

在图标库项目中添加图标

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

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

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

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

点击生成代码:

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

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

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

给菜单项目添加图标文字

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

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

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

最后保存菜单!我们就可以看到效果了! 😀

1. 本站付费资源来源于网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
去看你博客 » WordPress如何使用阿里巴巴图标库图标

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
评论后隐藏内容依旧不可见怎么办?
首次在本站评论需要经过审核通过后才可显示,为了您的评论能尽快通过审核请勿恶意评论,评论通过后会在第一时间通过邮件的方式发送到您在本站的注册邮箱内!
下载后无法正常运行如何提供售后支持?
每一个程序都经过严格的测试后发布上线,99%的问题都是安装方法错误或环境缺少扩展导致。普通用户不提供技术售后(可进行留言,我们收到之后尽可能去解答,但不保证马上解决),会员用户可随时随地享受优质的售后技术支持与问题解答。更多说明请参考 VIP介绍。

3 评论

  1. 画原型积累了不知道多少矢量图标 :mrgreen:

发表评论