WordPress 中引入阿里巴巴矢量彩色图标

阿里巴巴矢量图标库站点 iconfont：https://www.iconfont.cn/

登录方式有三种，Github、阿里域帐号 (仅限阿里员工使用) 和新浪微博，作为一名合格的互联网从业人员，Github 必不可少，所以建议使用 Github 登录，登录后，在资源管理菜单中选择我的项目子菜单项，在使用之前我们需要创建一个项目，如下所示：

在上图中，最后两个重中之重，后面我们需要用到，这里就用默认值，至于项目名称，可随便起。完成后接下来便是去搜索你所需要的图标，在搜索框中输入关键词即可，下面是我自己要用到的，如下所示：

有三种使用方式，分别为 Unicode、Font class 和 Symbol。

Unicode 是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持 IE6+ 及所有现代浏览器；
• 支持按字体的方式去动态调整图标大小，颜色等等；
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色；

Unicode 使用步骤

第一步：拷贝项目下面生成的 font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用 iconfont 的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">3</i>

Font class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。与 Unicode 使用方式相比，具有如下特点：

• 兼容性良好，支持 IE8+ 及所有现代浏览器；
• 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么；
• 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用；
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的；

Font class 使用步骤

第一步：拷贝项目下面生成的 Font class 代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面

<i class="iconfont icon-xxx"></i>

Symbol 这是一种全新的使用方式，应该说这才是未来的主流，也是目前推荐的用法。这种用法其实是做了一个 svg 的集合，与上面两种相比具有如下特点：

• 支持多色图标了，不再受单色限制；
• 通过一些技巧，支持像字体那样，通过 font-size，color 来调整样式；
• 兼容性较差，支持 IE9+ 及现代浏览器；
• 浏览器渲染 svg 的性能一般，还不如 png；

Symbol 使用步骤

第一步：拷贝项目下面生成的 Symbol 代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：加入通用 css 代码 (引入一次就行)：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

以上三种介绍及使用步骤来自于官方的使用说明，在这我选择的是第三种主流的用法，因为支持彩色显示，本站使用的是二开的 niRvana 主题 (收费的主题)，如果使用第三种方法的话，首先要获取 JS 文件链接，这个链接只需要在项目中生成即可，这里需要注意的一点就是当你新增图标时，JS 链接需要重新生成，获取到所需的 JS 文件链接后，下面就需要在主题中引用，二开的 niRvana 主题为用户提供了自定义的 function.php 文件，在主题的根目录下，名为 custom_function.php，因为 function.php 被加密了，所以主题作者提供了这么一个文件，允许用户通过 WordPress Hook 来定义自己的功能，如下所示：

相关代码

function add_stylesheet_to_head() {
    echo "\n<script type='text/javascript' src='//at.alicdn.com/t/xxxxxxxxxxxxxxxxxx.js'></script>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );

如果你们主题的 function.php 没加密，可以写在 function.php 中，做好这步后，需要将 css 代码加到 header.php (位于主题的根目录下)，如下所示：

相关代码：

<style type="text/css">
.icon {
    width: 20px; height: 20px;
    vertical-align: -5px;
    fill: currentColor;
    overflow: hidden;
}
</style>

我这里的 css 代码与官方提供的示例有所不同，因为如果我用官方提供的示例，发现显示的图标太小了，已经通过浏览器调试调节好了大小，你们自己也可以去调节，不一定要和官方写的一样，可灵活配置，这一步完了，就剩下最后一步了，在 WordPress 后台中的外观的菜单子选项中，挑选相应图标并获取类名，应用于页面，如下所示：

相关代码

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-Home"></use></svg> 网站首页

其中 class=”icon” 对应 FontClass/Symbol 前缀，icon-Home 对应图标代码，这也是开头所说的新建项目中后两个重要项。这些完成后，刷新页面等待会就可以显示了，如下所示：

怎么样，是不是比之前黑白的更好看了，嘿嘿 ^_^ !