如何给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' );

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

如何给WordPress菜单添加图标icon

 

2,WordPress后台添加图标方法

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

如何给WordPress菜单添加图标icon

3,调整外观

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

.colinqi::before {
  float: left;
}

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

如何给WordPress菜单添加图标icon

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

« 行业内最好的6个免费视频编辑软件 口罩和防疫物资出口注意事项,及各国海关认证要求 »

Say Something!

Leave a Reply