本文最后更新于2020-05-04 ,已超过 1个月没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

2020年5月4日18:57:44 发表评论 282 次浏览
刚开始使用知更鸟主题lts版本时,导航菜单使用别的阿里巴巴矢量图标库,当时想过自己创建项目使用自己的图标,奈何出现图标不显示以及菜单文字错位等情况,后面就没时间去管它,今天趁有时间百度收集了下资料,找到了解决方法.

显示错位效果

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

方法/步骤

一、登录阿里巴巴矢量图标库,创建一个图标项目;【PS:FontClass/Symbol 前缀和Font Family必须为zm或者be,目前知道的就这两个,其余自测】

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

二、通过搜索自己需要的图标,加入到购物车;

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

三、把购物车里的图标添加到项目;

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

四、更新下代码,复制代码到后台——外观——主题选项——辅助功能——阿里图标库粘贴保存;

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

五、在后台外观——菜单——导航菜单复制图标代码粘贴保存;【PS:菜单没有CSS类(可选)在右上角顶部显示选项勾选CSS类】.

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

最终效果

知更鸟主题添加阿里巴巴矢量图标库方法,站点美化记录

注意事项

新增/删减图标、修改图标大小/名称等操作都需要更新代码,复制更新后的代码粘贴到阿里图标库
weinxin
我的微信
这是我的微信扫一扫

发表评论

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