Typecho使用阿里矢量库换图标教程

我这边用的XC-Three主题，就用这个主题演示了，有需要这个主题的联系狱长购买

一、前期准备

首先打开阿里矢量库网站https://www.iconfont.cn/，进去后注册登录，我就不放图了
说明：阿里矢量库有两种方式引入，一种是在线引入一种是本地引入，这里教在线引入，本地自己下载文件引入即可

二，使用教程

1.登录后可以直接搜索图标，也可以去图标库看有没有适合的，这里我就直接搜索了

2.搜索后点击图中按钮选择多色图标（如果你想要黑白的自己随意哈）

3.然后鼠标拖动到想要的图标，点击第一个那个购物车图标的样子，添加购物车（放心，这个只是暂存购物车，不是让你支付花钱的）如果要用彩色图标就不要超过40个

4.点击购物车，然后点击添加到项目

5.然后点击新建一个项目

6.设置名字保存项目，保存后会自动跳转到保存后的项目

7.点击项目设置，然后选择彩色，保存即可，类名建议不要改，当然你想改也可以

8.然后按照图中点击，生成代码

9.点击复制下代码（这里的代码是当前库代码，理论来说你只要不改库里面东西他就一直是这个链接，如果添加修改新图标代码也要更新）

10.下来就是引入到主题中，在xc模版中，进入后台的全局设置自定义head，或者直接去head文件都可以，看自己，添加下面代码引入（自行修改下里面的链接哈）

<link rel="stylesheet" href="https:这里填阿里矢量库复制的代码" />

11.然后就可以引用了我这里以xc-three主题中自定义json代码示例

    {
        "title": "首页",
        "url": "https://www.tmetu.cn/",
        "ico": "类名 图标名",
        "target": 1
    },

因为我们之前讲过类名，不修改的话就是iconfont，图标名就是我们阿里矢量库，鼠标放图标上面点击复制即可

修改后的代码为

    {
        "title": "首页",
        "url": "https://www.tmetu.cn/",
        "ico": "iconfont icon-zhuye-",
        "target": 1
    },

其他所有图标的使用方法，不管是顶部，右键菜单，侧边都适用，保存看效果即可，再自己调调，其实很简单，但是我写的多，尽量让所有人都懂，看自己悟性了，有问题评论区留言

文章来源： 秋月の阁