添加使用阿里图标库字体

阿里巴巴矢量图标库,于2022年7月初,改变规则玩法,暂时(或永久)不允许用户外链图标库,只能将图标库下载到本地使用,目前不影响之前添加的外链字库,会影响到主题一些彩色图标的选项设置。

阿里巴巴图标库的优势

展开收缩

主题目前使用的阿里巴巴矢量图标库(Iconfont)与常用的 Font Awesome 图标,有绝对的优势:

图标字体多

目前Iconfont大约有近两千万个图标,而Font Awesome只有600多,让你有更多的选择。

按需使用

Font Awesome不论你使用几个图标字体,都需要完整加载字体库(1M多),而Iconfont可以按你所需定制图标字体库,并且可以根据你的需要随时更改,目前主题必须的字体图标库只有100多K。

可以外链字体库

使用Iconfont图标字体,不一定要在本地加载,可以直接将生成的字体库链接添加到主题中(目前无法使用)。

阿里巴巴图标库使用方法

使用说明可能看着有点长,但阿里巴巴图标库使用其实非常简单。

一、注册登录阿里巴巴图标库

访问:阿里巴巴矢量图标库

目前支持GitHub和新浪微博账号授权登录,注册登录后需要绑定手机号,或者可以直接手机号注册登录。

二、新建图标库项目

登录图标库后,顶部菜单 → 资源管理 → 我的项目,点击“新建项目图标”

添加使用阿里图标库字体

在弹窗中输入相关信息:

项目名称:名称任意

FontClass/ Symbol 前缀:必须输入zm-

Font Family:必须输入zm

字体格式:分别勾选彩色WOFF2WOFFTTF,如果只使用单色图标可以不勾选彩色。

彩色与单色同时使用,单色图标,不会受主题样式控制,会保持黑色不变。

添加使用阿里图标库字体

点击“新建”,完成图标库创建,但目前图标库是空的,需要为图标库添加图标。

三、为图标库添加图标

点击菜单上的素材库 → 点击图标库,进入全部图标库列表,进入一个图标库。

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

添加使用阿里图标库字体

 

选择添加完图标,点击顶部菜单右侧的购物车图标:

添加使用阿里图标库字体

在右侧弹窗中点击“添加至项目”按钮,在“加入项目”中选择刚建图标库。

添加使用阿里图标库字体

点击“确定”,完成图标添加,想再添加其它图标,重复上面的操作。

 

尽量选择添加线条较粗的图标字体,显示效果会好些。

 

添加使用阿里图标库字体

点击“下载至本地”,解压下载的图标库压缩包download.zip,将文件夹名改为iconfont,上传到begin\css目录中

2022年7月15日之后的主题上传到wp-content目录,并分别添加彩色与单色图标

四、加载图标字体库

进入主题选项 → 辅助功能 → 阿里图标库,勾选“本地图标”并保存设置。

添加使用阿里图标库字体

注:阿里巴巴矢量图标库,于2022年7月初,改变规则玩法,暂时不允许用户外链图标库,只能将图标库下载到本地使用,因此上面的外链图标库链接选项暂时已无用。

五、为菜单项添加字体图标

登录WP后台→外观→菜单,进入菜单编辑管理页面,添加图标字体需要显示菜单高级属性,打开右上角的”显示选项“,在“界面元素”中勾选,页面、自定义链接及分类等必须的内容,同时勾选所有高级菜单属性中的项目,如图:

添加使用阿里图标库字体

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

添加到菜单项目的CSS类中,前面需再加一个zm ,最终如:zm zm-application

添加使用阿里图标库字体

最后不要忘记保存菜单,最终效果:

添加使用阿里图标库字体

主题其它位置使用图标字体,与菜单添加方法类似,同样是添加类似的图标代码:zm zm-application

 


常见问题

如果未显示图标,请检查是否按第二步新建图标库项目中要求的:

FontClass/ Symbol 前缀:必须输入zm-

Font Family:必须输入zm

 

可以编辑项目按要求修改相关信息。


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


另外,由于Iconfont图标众多,很多图标字体的代码名称都是相同的,可能会相互冲突,不显示对应的图标,如果添加自定义图标后,发现某个图标显示为另外的其它的图标,就需要修改自定义图标代码名称:

其中Unicode(16进制)代码,比如下图这个图标的Unicode代码 e636,就与主题默认的新浪微博的图标相同随便改一个,但必须是字母e开头6以后的数字和字母组合,如改为:e6f7

同时,Font Class / Symbol中的名称也不能有重复的。

添加使用阿里图标库字体

不要把胡乱地把一些图标都弄到字库中项目中,使用哪个就添加哪个,不然会引起更多的字体名称冲突,而且会在一定程度上影响加载速度。


如果菜单上只想显示图标,不显示文字,用空格符号 代替文字。


Font Awesome 图标

如果你喜欢用Font Awesome图标,可以安装 Font Awesome 4 Menus 插件,两者没有冲突。

Font Awesome 图标代码对照

添加举例:fa fa-desktop


如果Font Awesome 4 Menus插件也不想用,还可以选择将外链 Font Awesome 图标库:

//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

 

添加到单色图标链接中

 

添加使用阿里图标库字体

然后在编辑菜单时,在导航标签中直接输入类似的:

<i class="fa fa-desktop"></i> 标题文字

最终显示效果相同,就是加载速度稍差。

 


如果只想在菜单上添加图标,有个更简单的方法,随便找个图标,点击下载图标,在弹窗中点击“复制SVG代码”,然后让代码粘贴到菜单项“导航标签”文字前面即可。

添加使用阿里图标库字体

最终与调用图标库中的图标效果相同,就是查看源代码时,有一堆SVG图片代码,不会对SEO之类的产生任何影响。