首页美图闪念

导航

加 · QQ

加 · 微信

朋友圈

留言

wdyo

独乐乐不如众乐乐！

首页
/
typecho专栏
/
正文

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

无毒有藕丨2024年11月11日丨301阅读丨3评论

我这边用的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
    },

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

文章来源：秋月の阁

0赞

打赏

typecho教程

发布作者：无毒有藕

本文链接： https://www.lqun.cn/27.html

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

—— 评论区 ——

无毒有藕博主

2024年11月18日 22:42 回复

好好学习天天向上
无毒有藕博主

2024年11月22日 09:55 回复

已经测试过了，非常nice
无毒有藕博主

2024年11月22日 09:56 回复

已经测试过了，非常nice

站点公告

联系ＱＱ：136391720

交流Ｑ群：312955095

加好友请备注来意，否则禁止通过！

人生倒计时

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

一、前期准备

二，使用教程

—— 评论区 ——

Typecho后台登陆注册合一手机端自适应源码

Typecho使用Redis缓存，优化访问速度

Typecho数据库自动备份插件

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

一、前期准备

二，使用教程

—— 评论区 ——

Typecho后台登陆注册合一 手机端自适应源码

Typecho使用Redis缓存，优化访问速度

Typecho数据库自动备份插件

Typecho后台登陆注册合一手机端自适应源码