Begin主题阿里矢量图标库添加个性导航图标

2021年8月22日16:16:43 发表评论

文章转载至:搜览-知更鸟Begin破解主题用阿里巴巴矢量图标库(Iconfont)添加个性导航菜单图标

 

我找了很多网上发的有关 “用阿里巴巴矢量图标库添加个性导航菜单图标(知更鸟Begin主题)” 的文章,终于搞定了Begin5.2主题添加个性导航菜单图标。

方法/步骤

 

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

阿里巴巴矢量图标库/Iconfont:https://www.iconfont.cn

目前只支持GitHub和新浪微博账号授权登录。

 

2、登录后,点击下图菜单中的 资源管理 >> 我的项目

Begin主题阿里矢量图标库添加个性导航图标

 

3、新建项目(新建项目图标)

Begin主题阿里矢量图标库添加个性导航图标

 

4、项目名称随意、在FontClass/Symbol 前缀和Font Family,分别改成【be-】和【be】(不会的  话就默认点新建) >> 点击【新建】

注:FontClass/Symbol 前缀和Font Family 前后不能有空格。

 

Begin主题阿里矢量图标库添加个性导航图标

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

用鼠标选择一个图标并点击下图的添加入库(购物车图标),将图标添加到临购物车中。

注:主题不支持多色图标

Begin主题阿里矢量图标库添加个性导航图标

 

6、选择添加完图标,点击右上角的购物车图标

Begin主题阿里矢量图标库添加个性导航图标

 

7、将添加在购物车中的图标添加到相应项目中

Begin主题阿里矢量图标库添加个性导航图标

 

8、加载外链图标字体库

点击查看在线链接,获取在线css链接

Begin主题阿里矢量图标库添加个性导航图标

Begin主题阿里矢量图标库添加个性导航图标

Begin主题阿里矢量图标库添加个性导航图标

9、复制代码,进入WP后台 >> 外观 >> Begin主题选项 >> 辅助功能选项卡,将复制的图标字体库链接添加到主题选项中,最后保存。

 

Begin主题阿里矢量图标库添加个性导航图标

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

如果再次添加图标,重复上面5~8的步骤,或新建项目,重复3~8的步骤。

 

10、给菜单项目添加图标

WP后台 >> 外观 >> 菜单,进入菜单编辑管理页面,打开右上角的”显示选项“,勾选“CSS类”或勾选全部的“模块”和所有高级菜单属性。

Begin主题阿里矢量图标库添加个性导航图标

 

11、回到啊里图标字体库的页面,用鼠标复制图标代码,例如:be-shouye

Begin主题阿里矢量图标库添加个性导航图标

Begin主题阿里矢量图标库添加个性导航图标

 

12、复制代码到菜单项目的CSS类中

方法一:WP后台 >> 外观 >> 菜单,菜单左侧【菜单结构】选择要添加“图标”的页面,选择好后【复制代码】粘贴到“CSS类”中。

 

Begin主题阿里矢量图标库添加个性导航图标

方法二:WP后台 >> 外观 >> 自定义 >> 菜单,选择要添加“图标”的页面,选择好后【复制代码】粘贴到“CSS类”中。

Begin主题阿里矢量图标库添加个性导航图标

13、最后就是记得要保存菜单,保存过后才能看到效果:

Begin主题阿里矢量图标库添加个性导航图标

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

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

兰溪苑

发表评论

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