1.使用iconfont阿里巴巴图库新建项目库并下载

如何打开使用iconfont阿里巴巴图库？

百度搜索（ iconfont ）即可，或打开此链接访问( https://www.iconfont.cn/ )

打开后左上角搜索你需要的图标（例：首页）

随后将鼠标放到看上的图标上选择第一个加入（图标车)

点击右上角的图库车，然后会弹出以下图片的样子，但加入项目是空的，这时候需要新建项目直接选中第一个后点击确定即可。

随后点击（资源管理）选择（我的项目）打开刚刚创建的项目（no name)

然后选择(Font class) 《此步可省略》

再点击下载至本地

2.区别下载下来的压缩包内的文件使用途径

随后会下载一个类似于以下图片昵称的压缩包，需要解压出来（建议桌面新建文件夹后将压缩包放入解压到文件夹内）

首先我们要先知道这些文件是干什么的？

demo.css 与 demo_index.heml 可以忽略

demo_index.heml 为调用教程教您如何正确调用其图标内容（demo.css为demo_index.heml的样式美化文件）

iconfont.ttf，iconfont.woff，iconfont.woff2 他们为Unicode引用法的调用文件，当使用Unicode引用时就需要采用这三个文件进行引入

iconfont.css 为font-class 引用，同时他也是目前最实用且兼容性高的一种引入方法

iconfont.js 与 iconfont.json 为Symbol 引用，他跟上面两种引用方式不同，在iconfont阿里巴巴图库提供的文件中，他俩只需要调用其中一个即可，不需要全部调用

在我们知道了他分别是干什么的后基本也就知道了如何根据自己需要进行调用了

3.各类调用方法教程

观看此教程前务必优先打开demo_index.html文件后再根据本教程进行操作

Unicode引用

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

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

@font-face {
font-family: 'iconfont';
src:
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1659247147130') format('woff'),
url('iconfont.ttf?t=1659247147130') format('truetype');
}

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

以上两个为官方提供的Unicode引用的CSS代码这是我们需要将两段内容合并为一条内容后放入主题的css文件中（此处代码复制自己的demo_index.html里的内容，这里仅仅是示例）

@font-face {
font-family: 'iconfont';
src:
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1659247147130') format('woff'),
url('iconfont.ttf?t=1659247147130') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

以7b2主题为例需要访问网站根目录/wp-content/themes/b2（此处b2为主题昵称）

打开以上目录后编辑style.css文件，将上方合并在一起的Unicode的CSS引入代码放入其中

放入后保存退出即可

回到网站后台的外观菜单中编辑菜单（例：首页，将首页文字改为 <span class=”iconfont”>3</span>首页 )

其中&#x33为图标编号，编号可以在demo_index.html中Unicode引入中查看

Font class引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

根据官方提供的代码如下

Font class最为简单，只需要将代码内容放入主题的CSS文件即可

以7b2主题为例需要访问网站根目录/wp-content/themes/b2（此处b2为主题昵称）

打开以上目录后编辑header.php文件，将上方Font class引入的CSS引入代码放入其中（此处会发现href=//www.yihe.club/iconcss/inconfont.css，其中//www.yihe.club为域名为什么不加http:或https:呢，因为站点可能存在http何https共存情况，不加http:或https:是为了让其自适应。/iconcss/inconfont.css为指定的一个目录下的文件，这个目录建立在网站根目录即可或不建立也行，但记住不是主题根目录！！！！)

后回到网站后台的外观菜单中编辑菜单（例：首页，将首页文字改为 <span class=”iconfont yiheico-xxx”></span>首页 )

其中yiheico-xxx为图标编号，编号可以在demo_index.html中Font class引入中查看

这里注意一点iconfont 此内容不可动，后yiheico-xxx可根据dome中提供的图标编号进行填入iconfont后有一空格

Symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

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

根据官方提供的代码如下

这是style类的，同第一种一样，两段合并放入头部文件中

以7b2主题为例需要访问网站根目录/wp-content/themes/b2（此处b2为主题昵称）

打开以上目录后编辑header.php文件，将上方Symbol引入的CSS引入代码放入其中（此处会发现href=//www.yihe.club/iconcss/inconfont.css，其中//www.yihe.club为域名为什么不加http:或https:呢，因为站点可能存在http何https共存情况，不加http:或https:是为了让其自适应。/iconcss/inconfont.css为指定的一个目录下的文件，这个目录建立在网站根目录即可或不建立也行，但记住不是主题根目录！！！！)