WordPress菜单导航如何使用阿里巴巴iconfont图标库

阿里图标库支持用户自定义图标，其中包含了极其多样的图标资源。本教程将详细介绍如何利用该平台上的图标来作为你的菜单图标。

登录阿里图标库访问 https://www.iconfont.c创建一个新的项目

项目名称可以任意填写，前缀可以直接使用默认的“icon”。

WordPress菜单导航如何使用阿里巴巴iconfont图标库

创建项目后，就可以去添加所需的图标了。找到想要的图标后，点击将其添加到购物车。

WordPress菜单导航如何使用阿里巴巴iconfont图标库

添加完成后，需要将图标加入到项目中。可以选择右上角的购物车图标，点击后选择“添加至项目”。

进入“我的项目”，你就能看到已添加的图标了。

选择“Font class”，生成一个链接。复制这个链接，就可以将其粘贴到WordPress中使用了。

WordPress菜单导航如何使用阿里巴巴iconfont图标库

在WordPress中引入这个CSS文件。许多主题支持引入外部链接，以CorePress主题为例。

WordPress菜单导航如何使用阿里巴巴iconfont图标库

<link rel="stylesheet" href="//at.alicdn.com/t/font_114125_rg8g2e669a.css" type="text/css" media="all">

引入完成后，在WordPress的菜单设置中，勾选“CSS类”选项，然后选择你想要应用图标的菜单项。

WordPress菜单导航如何使用阿里巴巴iconfont图标库

找到菜单，在菜单名称填入如下代码，其中#iconanquan为图标名称

WordPress菜单导航如何使用阿里巴巴iconfont图标库

<svg class="icon" aria-hidden="true"><use xlink:href="#iconanquan"></use></svg>

设置好以后，图标就是彩色的了。

免责声明须知 1、本站所有信息内容仅供学习参考和研究使用，不得用于商业或非法用途，否则后果请用户自行承担。
2、请按此声明学习参考和研究使用软件，严禁一切以商用或违法目的使用！否则后果请用户自行承担！
3、如若您喜欢当前信息内容，请购买正版以获得商用服务支持。若有侵权请联系 esucloud@email.cn 删除。
4、本站信息均来自三方收集整理或用户发布，版权争议与本站无关，请在24小时内从您设备中彻底删除上述内容。
5、根据《计算机软件保护条例》第十七条，为了学习和研究软件设计思想及实现原理，可以不经著作权人许可使用软件。