在WordPress中使用IcoMoon图标来加强社交图标

许多WordPress主题都使用WordPress官方制作的genericons图标来作为社交图标。对于外国网站,genericons已经涵盖了绝大多数的社交平台的图标,比如facebook、twitter等等。但是对于国内用户来说,genericons显然是缺少了很多广为中国用户所知的社交网站,比如说微博。因此,这篇文章将介绍如何使用IcoMoon图标来给我们的网站带来中国社交网站图标。当然,这篇文章也可以作为使用其他图标的一个参考。比如FontAwesome。

先来介绍一下IcoMoon是什么吧

首先,IcoMoon是一个免费的icon图标库。他支持自定义,我们可以按我们自己的需要来配置自己的图标库,这样可以让我们的图标库实现轻量级。这比直接引用图标库或使用一些插件要好得许多,因为我们没必要调用比较大的JS、CSS等。

怎么使用IcoMoon

使用IcoMoon和其他类似的图标库的思路都是一样的,如下:

  • 生成自己的图标库
  • 引用图标库
  • 在需要的地方引用图标

以下将一一介绍

生成自己的图标库

先进入IcoMoon选择图标的地址

在IcoMoon中选取图标

也可以直接通过搜索来获得我们想要的社交图标。在把想要的社交图标全部收集完成了之后,点击“Generate Font”

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

IcoMoon生成图标

注:这些图标会保存在浏览器的cookies里,如果没有清空浏览器cookies的话,下次如果想增加图标,就不必重新开始选择了,十分方便。

引用IcoMoon

下载完之后,我们需要把得到的压缩包传到服务器中,我一般是选择解压到主题的根目录里。在这里我建议把iconmoon文件夹里面的style.css重命名为iconmoon.css。然后在header.php的<head>和</head>之间插入:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/iconmoon/iconmoon.css">

使用图标

我们可以在刚刚那个页面里获得图标的代码,只要点一下想看的图标就可以,以“搜索”为例:

IcoMoon下载页面

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

图标的代码

一般我是使用HTML的代码,因为这比较简单,也比较灵活。

比方说我可以在任何地方插入这段代码,就可以显示图标了。比方说我在菜单里写:

<span class=”icon-search”></span>

那么这个菜单就会显示成一个搜索的符号。如果这样写:

<span class=”icon-search”>搜索一下</span>

那么则是在搜索一下前面会显示一个搜索的符号。

如果想复杂一点,想让IcoMoon图标被自动调用,则要在主题的CSS里面进行修改,以下以isola主题为:

isola的样式表

要告诉主题我们要使用IcoMoon主题了。

isola的样式表

然后找到社交链接,这里可以搜索facebook,毕竟facebook是最重要的社交图标。然后把content后面的代码改成IcoMoon对应的代码即可。

我还是建议直接引用HTML标签来显示图标,让主题自动调用社交图标的方法应该会因为主题的不同而有所不同。

另外,在部分主题里,我发现无法引用外部的社交图标,比如我正在使用的TwentyNineteen主题,这个问题不止发生在IcoMoon主题中,应该是主图的问题。

你可能还喜欢

加入对话

4条评论

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

  1. 另外,在部分主题里,我发现无法引用外部的社交图标,比如我正在使用的TwentyNineteen主题,这个问题不止发生在IcoMoon主题中,应该是主图的问题。
    ====
    加载.css的顺序问题吧,很可能同名覆盖了。