为主题添加阿里云图标字体

  • A+
所属分类:建博笔记
摘要

图标字体是一种CSS或JS代码,添加图标字体可以使博客更加美观。同时,相比旧式的使用图片作为图标的方式来说,也更易制作和修改。主题默认已集成该功能,本文主要介绍其具体的使用方法。

为主题添加阿里云图标字体

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

链接:阿里巴巴矢量图标库,没有账号的童鞋自行注册一个,目前好像只支持 Github

为主题添加阿里云图标字体

 

2、新建一个图标库项目

为主题添加阿里云图标字体

给项目起一个名字,需要注意的是【FontClass/Symbol】前缀和【Font Family】这两个地方一定要填zm,前后不能有空格,否则不能正确加载图标字体。

为主题添加阿里云图标字体

 

3、从图标库中选择合适的图标字体添加到新建项目中

为主题添加阿里云图标字体

鼠标移动到喜欢的图标上,点击【购物车】图标

为主题添加阿里云图标字体

此时,在网页右侧的购物车里会显示数量

为主题添加阿里云图标字体

点击【购物车】,点击【添加至项目】

为主题添加阿里云图标字体

选择刚才新建的图标库项目,我这里是 blog,然后点击【确定】

为主题添加阿里云图标字体

此时,网页会跳转到你之前新建的图标库项目界面

为主题添加阿里云图标字体

鼠标移动到刚才添加的图标上可对该图标进行相应的操作,在此我们点击【编辑图标】图标

为主题添加阿里云图标字体

在编辑界面,可对图标做简单的修改。如果想修改默认的图标字体的类名,可在【Font Class / Symbol】中修改,然后点击【仅保存】

为主题添加阿里云图标字体

 

4、添加图标字体至主题中

点击【暂无代码,点此生成】

为主题添加阿里云图标字体

如果你多次修改图标字体,上面的【暂无代码,点此生成】会稍有变化

为主题添加阿里云图标字体

这样的话,你需要点击【下方新 icon 来袭,点击更新代码】。此时,会出现一行代码,点击【点此复制代码】,也可以手动复制那行代码

为主题添加阿里云图标字体

切换到博客后台的【主题选项--辅助功能】,将刚才复制的代码粘贴到【阿里图标库】中,并保存

为主题添加阿里云图标字体

然后切换到【外观--菜单】,并展开你想添加图标字体的菜单名称,在【CSS 类(可选)】中输入zm-home,然后保存

为主题添加阿里云图标字体

其中:zm-是主题设置的前缀;home是之前你编辑图标字体时自行设置的 Font Class / Symbol 名称。如果你没有编辑过图标字体的话,点【复制代码】就可以得到该图标字体的 CSS 名称。参考下图

为主题添加阿里云图标字体

至此,添加图标字体的完整操作就完成了,效果如下:

为主题添加阿里云图标字体

 

最后,需要注意的几点

  • 在新建图标库项目名称时,有两处必须填写zm
  • 在菜单中设置 CSS 类名称时,一定要添加前缀zm-
  • 每编辑一次图标字体都会生成新的图标库字体 CSS 代码,需要重新复制该代码到【主题选项--辅助功能--阿里图标库】中;
  • 图标字体与图标字体之间可能存在大小不一的情况,影响博客整体显示效果,建议根据自己的实际情况在编辑图标中调整大小;
  • 图标字体不是只能用来添加到导航菜单,凡是涉及到 CSS 类名的地方都可以使用图标字体,比如本博客顶部的菜单和页脚菜单也均使用了图标字体;
若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

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