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

 🍂轩落阁🍃
2年前发布 /正在检测是否收录...

AI摘要:

🍂轩落の阁🍃AI

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


一,前期准备

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

二,使用教程

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

微信图片编辑_20241108190814.jpg

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

微信图片编辑_20241108191316.jpg

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

微信图片编辑_20241108192033.jpg

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

微信图片编辑_20241108192242.jpg

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

微信图片编辑_20241108192425.jpg

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

微信图片编辑_20241108192709.jpg

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

bb33ef15cbb1b6744cc9ede21140fdcc.png
82f179594411826c85e5440001081f67.png

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

3a42fb9a18b7fd91f810038f124a30c5.png

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

dcab4f4dbf0ba0b99eedfcb2c87ad07.png

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

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

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

因为我们之前讲过类名,不修改的话就是iconfont,图标名就是我们阿里矢量库,鼠标放图标上面点击复制即可
9bb7f5ae28c0d285db5b2bbb551eb93.png
修改后的代码为

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞 3 分享 赞赏
评论 共1条
OωO
取消
  1. 头像

    [...]},其他所有图标的使用方法,不管是顶部,右键菜单,侧边都适用,保存看效果即可,再自己调调,其实很简单,但是我写的多,尽量让所有人都懂,看自己悟性了,有问题评论区留言文章来源:https://www.xn--gmq25xoow.top/archives/259.html[...]