如何给wordpress菜单增加不同的图标

虽说WordPress菜单图标没有很多的实际意义，但它能够带来外观上的赏心悦目。漂亮的图标也会不自觉地引导用户点击查看。至少我的网站上这些图标让菜单看起来不再那么单调了。

本文记录的方法是不再使用任何插件，或者要单独上传图片来实现。毕竟使用插件影响速度加载，而单独上传图片又非常不方便。这里使用的方法是在后台菜单的class中增加自己想要的图标class名称即可。

1，建立图标库

即使要添加图标，就得有图标；不使用插件和单独上传图片，就需要建立自己的图标库。所谓图标库就是将你要用到的图标全部打包在一起，然后通常调用图标库里的图标显示在网站上。

制作图标库，我们可以使用现成的图标库制作网站，这里分别介绍两家。一是国外的fontawesome.io，另外就是国内的阿里妈妈iconfont.

制作图标库流程差不多，注册成功后，建立自己的图标库项目，然后去其网站寻找所有你需要的图标添加到你的图标库中。

以iconfont为例：成功添加所有的图标到你的图标项目中后，将这些图标引用到你的网站上有两种方式

一是采用在线链接，也就是你不需要将这些图标下载到你的网站上，只需要将链接引用到你的CSS中就可以了。本文给WordPress菜单添加自定义图标，就是使用Font Class方法引用链接的代码，虽然iconfont提供另外两种Unicode和Symbol，但不适合添加图标到菜单上。
在你的functions.php添加以下代码，将你的项目图标库引用到你的网站上。

function colinqi_enqueue_icon_stylesheet() { 
   wp_register_style( 'iconfont', '//at.alicdn.com/t/font_1647611_qdswg0666q.css' ); wp_enqueue_style( 'iconfont'); 
} 
add_action( 'wp_enqueue_scripts', 'colinqi_enqueue_icon_stylesheet' );

而fontawesome.io引用的方法是一样的。

另外一种就是采用下载图标库，再上传到你的网站中去。通常我会放在/主题/assets/fonts目录下。然后也是在functions.php中增加此引用代码。

function colinqi_css_scripts() {
   wp_enqueue_style( 'iconfont', get_theme_file_uri( 'assets/font/iconfont.css' ) );
}
add_action( 'wp_enqueue_scripts', 'colinqi_css_scripts' );

到这一步，所需要的图标库已经建立和引用完成。

2，WordPress后台添加图标方法

首先进入到WordPress后台-外观-菜单页面下，并且将顶部Screen Options屏幕选项打开，将CSS classes属于勾选。因为只有打开此项设置，菜单下才能输入自定义的图标代码。
如下图，你会发现在菜单的下拉箭头下，就会多出一个CSS classes栏出来。只要将你的项目库名称+图标名称，以空格为间隔填进去即可。图标名称要去你的图标库下面复制。

3，调整外观

按上述方法加入的class是放在li class=""的代码中，只需要在你的CSS文件中添加以下代码即可

.colinqi::before {
  float: left;
}

上述代码即可把图标浮动到你的菜单名称前面了，至于大小，距离，你可以根据自己网站的风格需要添加相应的CSS值来控制。

向你的网站添加图标是一个与一两年前非常不同的过程。现在，您可以使用基于字体的图标库添加图标，而不是上传图像并使用样式将它们放在页面元素的背景中。