我们在浏览网页时，可能会注意到，有些 WordPress 网站菜单导航栏的文字前还有图标。大家可以参考下图，当然不是所有图标都如下图中是彩色的，大多就是普通的黑白颜色。在导航栏文字前添加图标，不仅可以让菜单更加美观，同时添加对应含义的图标，还能让读者更加直观地了解菜单项的内容。
那么，怎么给 WordPress 菜单添加图标呢？下面小白以目前使用的 Modown 主题为例，分别从添加普通的黑白图标和彩色图标两方面为大家介绍！
普通图标
WordPress 添加图标，普遍使用的有三个，分别为 Dripicons、Iconfont、Font Awesome 的图标。
Dripicons & Iconfont
小白使用的 Modown 主题貌似自带 Dripicons 和 Iconfont 普通的黑白图标，所以需要添加这两款图标的话，直接使用相应的短代码即可（参考示例）。
Dripicons 图标使用参考：http://demo.amitjakhu.com/dripicons/，示例：<i class=”dripicons dripicons-home”></i>
Iconfont 图标使用参考：https://at.alicdn.com/t/project/1680534/b822903a-ee00-4a0f-9b62-fc2d380cbac7.html，示例：<i class=”icon icon-home”></i>
Font Awesome
如果想要使用 Font Awesome 图标也非常简单，以目前最新的 V6 免费版本为例，在主题设置“自定义代码”中， 引入 css 文件：
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css”>
然后使用短代码 <i class=”fas fa-home”></i> 或者 <i class=”fab fa-home”></i> 即可（早期 V4 版本的短代码为 <i class=”fa fa-home”></i>）。
PS，为避免个别情况下不对齐的问题可以使用 span 标签包裹，示例：<span><i class=”fas fa-home”></i> 菜单名称</span>
彩色图标
想要使用彩色图标，可以在上述普通图标基础上，通过自定义 CSS 的方式定义颜色。不过这种方法显示效果可能不太好，因此小白重点介绍以下两种方法。
emoji 表情符号
WordPress 原生支持直接显示 emoji 表情符号，所以最简单添加彩色图标的方法，莫过于直接使用相应的 emoji 表情。
当然，由于 emoji 表情符号有限，很多内容都没有对应的 emoji 符号。而且 emoji 符号在 WordPress 网站的某些位置，显示效果不佳。所以有更高要求的话，可以看看下方 Iconfont 的彩色图标教程。
Iconfont 彩色图标
如何为网站引入阿里巴巴彩色矢量图标呢？打开阿里巴巴矢量图标库网址：https://www.iconfont.cn/
1、登陆网站后，点击上方“资源管理”—“我的项目”按钮，创建一个项目（名称最好为字母）；
2、找到想用的图标后，鼠标指针放在图标上，点击第一个购物车标志的“添加入库”，然后再次点击页面右上方购物车标志按钮，“添加至项目”（注意选择加入刚才创建的项目）；
3、之后页面一般会自动跳转到“我的项目”（如下图），至此前期工作准备完成，接下来主要是在网站进行操作；
同样以 Modown 主题建设的 WordPress 网站为例（其他主题大同小异）：
通过管理后台，外观—— Modown 主题设置——样式，在“自定义CSS样式”添加以下代码：
/* 彩色iconfont */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
在“自定义头部代码”添加以下代码：
<script src="//at.alicdn.com/t/font_更改为自己的.js">script>
注意把“//at.alicdn.com/t/font_更改为自己的.js”替换成您自己的，在我的项目中可以复制（参考上图）
最后，在外观——菜单——导航标签的菜单名称前，添加以下代码即可：
<svg class="icon" aria-hidden="true"><use xlink:href="#iconVIPhuiyuan"></use></svg>
代码“#iconVIPhuiyuan”中，# 号后内容修改为您需要使用的图标名称。
评论0