知更鸟主题添加阿里巴巴矢量图标库方法

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

显示错位效果

知更鸟主题添加阿里巴巴矢量图标库方法

方法/步骤

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

知更鸟主题添加阿里巴巴矢量图标库方法

知更鸟主题添加阿里巴巴矢量图标库方法

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

知更鸟主题添加阿里巴巴矢量图标库方法

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

知更鸟主题添加阿里巴巴矢量图标库方法

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

知更鸟主题添加阿里巴巴矢量图标库方法

知更鸟主题添加阿里巴巴矢量图标库方法

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

知更鸟主题添加阿里巴巴矢量图标库方法

最终效果

知更鸟主题添加阿里巴巴矢量图标库方法

注意事项

新增/删减图标、修改图标大小/名称等操作都需要更新代码,复制更新后的代码粘贴到阿里图标库
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
搜索