给你的WordPress主题加上IcoMoon图标

目前,大部分WordPress主题所使用的社交图标都是genericons图标(毕竟genericons是由WordPress公司制作的)。genericons并不是不好用,只是对于中国一些社交网站的支持,如微博等,支持得并不是非常的好。而且genericons的图标种类比较少,有很多精美的图标都没办法被展示出来。

IcoMoon是什么?

IcoMoon是一款可支持自定义的免费icon图标库(注意是:免费。据我所知,在国内一些素材库里面的图标,实际上有些并不能随便被使用的)。IcoMoon使用起来极其方便,可以根据自己所需要的图标来生成属于自己的图标库,这样我们获取的图标文件就是轻量级的。我记得网上还有一些图标库,但是有些不支持自定义,因此直接调用的话会对WordPress的站点速度带来比较不好的影响。

使用IcoMoon的第一步:生成图标文件

IcoMoon生成图标,通过这个链接,我们便可以开始选取我们需要的图标了。

“search”可以让我们直接搜索我们想要的图标。在选取完所有我们需要的图标之后,我们可以点击右下角的“Generate Font”来生成图标文件。

使用IcoMoon的第二步:引用图标文件

下载完之后,我们把得到的压缩文件解压在我们的虚拟主机/服务器里。我们需要记录我们放置解压后得到的文件夹的地址,我一般是解压在网站根目录下的。如果是解压在网站根目录下的话,我们在主题header.php文件中调用IcoMoon的语句可以这样写:

<link rel="stylesheet" href="/iconmoon/iconmoon.css">

这边提醒各位一下。解压后得到的文件夹里,是没有iconmoon.css这个文件的,应该是叫style.css。但是我使用的主题,如果是style.css的话则会报错(我觉得这可能是因为我们主题的样式表文件一般情况下都叫style.css),因此我把style.css这个文件重命名为iconmoon.css。

使用IcoMoon的第三步:使用图标文件

每个IcoMoon图标都有属于自己的代码。我们可以在下载图标文件的那个页面中,把鼠标悬停在我们想要查看代码的图标上,然后我们会看到一个“Get Code”。点击之后,就可以看到代码了。

我一般是使用HTML代码。因为这个代码可以直接简单粗暴地直接使用。比如说我要在菜单里使用这个“search”图标,那么我可以在菜单的“链接文字”中这样写:

<span class="icon-search">搜索</span>

然后我们就会在菜单里,看到“搜索”文字前面有一个“搜索的图标”。当然如果我们什么都不写,那么就只会有一个图标了。

这里再提一下,我们是可以修改代码的。比如我们可以把icon-search改成icon-sousuo,而把986改成985。

至于字母加数字的代码有什么用?这个我们可以把他添加到主题的CSS文件中。这样IcoMoon图标就能够像genericons图标一样被主题自动调用了。比方说:

先要告诉CSS文件,menu(菜单)中地址使用的字体是IcoMoon(原本这里是genericons)。

然后根据具体需要,将“链接前面含有某部分”的,替换成图标。而content后面的代码,就是字母+数字的代码形式。

当然这种调用方式,可能还会因为主题的不同而有所不同。

你可能还喜欢

留下评论

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