cyweb导航主题使用阿里云图标的方法

主题默认使用FontAwesome不论你使用几个图标字体,都需要完整加载字体库,而Iconfont可以按你所需定制图标字体库,并且可以根据你的需要随时更改,可以直接将生成的字体链接添加到主题中。

介绍完阿里巴巴矢量图标库的优势,下面开始具体使用方法:

阿里巴巴矢量图标库

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

登录后,点击上面菜单中的图标管理→我的项目,点新建项目图标新建一个图标项目:

 

cyweb导航主题使用阿里云图标的方法在弹出的窗口中输入相关信息,项目名称任意。

需要注意是:

FontClass/Symbol 前缀和Font Family两项中必须输入:io,前后不能有空格。如图:注意前缀加中横线

cyweb导航主题使用阿里云图标的方法

 

点击菜单上的图标库,进入一个图标库(注:主题不支持多色图标)。

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

cyweb导航主题使用阿里云图标的方法

 

已添加过的图标,会有个虚线框提示,右上角购物车图标上的数字,是在购物车中待添加到项目中的图标个数。

选择添加完图标,点击右上角的购物车图标,将添加在购物车中的图标添加到相应该项目中:

cyweb导航主题使用阿里云图标的方法

 

点击生成代码:(以后每次添加新图标都要重新生成代码)cyweb导航主题使用阿里云图标的方法

 

复制代码:cyweb导航主题使用阿里云图标的方法

 

进入WebStack Pro主题设置选项→其他功能选项卡,将复制的图标字体库链接添加到主题选项中:cyweb导航主题使用阿里云图标的方法

 

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

如果再次添加图标,重复上面的步骤。

添加图标字体需要将菜单高级属性打开,登录WP后台→外观→菜单,进入菜单编辑管理页面,打开右上角的”显示选项“,勾选其中全部的“CSS类”,如图:

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

cyweb导航主题使用阿里云图标的方法

 

添加到菜单项目的CSS类中,前面必须加一个io,最终如:io io-zhuti,如图:

cyweb导航主题使用阿里云图标的方法

 

最后不要忘记保存菜单。

分类目录添加到图标代码到下图

cyweb导航主题使用阿里云图标的方法

 

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

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

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

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

cyweb导航主题使用阿里云图标的方法

 

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

每次添加或者编辑了图标名称不要忘记点击“更新代码”,并把新的字库链接重新添加到主题选项中。

版权声明:东方锅锅 发表于 2023-10-26 14:22:25。
转载请注明:cyweb导航主题使用阿里云图标的方法 | cywebdh导航主题
广告位招商
免责声明1 本导航系统名称:cywebdh导航主题
2 本导航系统网址:https://dh.cy520.cc
3 如果您正在查看某站点介绍页面,本导航系统与此页面所示站点无关,本站仅收录其页面,不对其内容负责,请自行判断其内容真实性与隐私性。如您发现其站点存在问题请在下方评论区留言或联系QQ123456进行删除处理。
4 本站一切资源来自互联网或网友投稿不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5 本站APP及资源来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。
6 如您正在查看的是资源或app,请自行判断其真实性与隐私性。资源来自网友投稿或互联网采集本站不对其内容负责。如过资源侵犯了您的隐私,请发送邮件到123456,我们将尽快审核后进行永久删除。
7本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
8如果您正在查看的是本站文章,本站所有文章如无特殊注明由本站享有版权,转载请在显眼处注明出处。

暂无评论

暂无评论...

本站已费尽心思,苦苦支撑运行了:0年117天14小时7分

本次数据库查询:54次 页面加载耗时0.211 秒

拉不动啦!我也是有底线哒~