折腾半天,终于成功更换icon图标方案了:从Genericons到Icomoon

小陈笔记目前所使用的的主题是TwentySixteen。和许多WordPress主题一样,这款主题的icon图标,使用的是WordPress官方的Genericons。其实这款字体也是不错的,除了支持的图标较少以外,也没有别的缺点了。

可是我今天强迫症突然就来了,想把手机端的“菜单”上面的“菜单”两个字去掉,然后换成图标,如下图所示:

“菜单”变成了“图标”

部署icomoon

我一开始是想利用自带的Genericons图标里的菜单图标的,但是我不知道怎么直接插入这个图标。再想想Genericons支持的图标并不全面,倒不如趁这个机会,换成我熟悉的Iconmoon,顺手还可以添加几个如微博这样的大家比较熟悉的社交平台的图标。

于是,我就开始把Genericons更换成Iconmoon了。首先得按照我之前的一篇文章来:在WordPress中使用IcoMoon图标来加强社交图标来部署Icomoon图标。在这里我更正以下引入icomoon css文件的方法。在旧的这篇文章里,我是直接在header.php里面添加的,现在我建议在functions.php的函数里添加这个语句:wp_enqueue_style( ‘iconmoon’, get_stylesheet_directory_uri() . ‘/iconmoon/iconmoon.css’);

然后在header里吧“菜单”两个字出现的语句用图标字体的代码替换掉即可(<span></span>)。

按理来说这样就大功告成了。因为我已经实现了“菜单”两个字被图标替代。但是我的强迫症又犯了。我不想让我的主题加载两个功能重叠的字体。因此我想要使用icomoon来全面替换genericons,这就需要更改css了。因为许多div都有用到genericons的图标。

把font-family的值修改成“icomoon”

第一步就是要先把css里面声明font-family是genericons的地方修改成icomoon了。在这里建议可以在css里面搜索“genericons”,这样就可以快速锁定目标语句,修改即可。

把font-family的值修改成icomoon。

用icomoon的图标替换genericons的图标

这步是最繁琐的,因为你要一个一个地把genericons的图标替换成icomoon的图标。虽然只是简单地把代码给替换,举个例子,从“edca”变成“e300”。但是往往观看css的代码,你并不知道这个图标长什么样子,好在我发现了一个网站,里面记载了genericons图标编号代表的含义与模样,可供大家参考。

然后你要找到对应的icomoon图标,不对应也行,只要你觉得看着舒服就可以。然后按照最开始我说的那样重新部署一遍。然后就行了。有时候icomoon图标和genericons对应图标的大小可能会有所不同,为了美观,那就得需要修改font-size了。

当然如果你要添加图标,比如说添加微博的社交图标,那么还得加上这个语句。具体主题的操作可能不同,但是应该不会太难。以TwentySixteen为例,在css里面添加这个语句就可以了(当然你得先部署好含有ea9a编号的微博图标的icomoon)。

.social-navigation a[href*=”weibo.com”]:before {
content: “\ea9a”;
}

icomoon文件更小

让我感到意外的是,我的icomoon里面足足有50个图标,但是文件的大小只有genericons的不到一半。虽然说文件加载的速度取决于很多因素,但是我还是会感觉,使用icomoon,至少不至于让我的网站变得更慢。

注:因为我之前看错icomoon的名字,看成了iconmoon,所以如果我的文章,或之前的文章里面,出现了iconmoon,那么请一律将其视为icomoon。

你可能还喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注