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

  • 🍂轩落阁🍃 2024年11月08日 144阅读 1评论
  • 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
        },

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

    3
    打赏

    —— 评论区 ——

    昵称
    邮箱
    网址
    取消
    1. @
      头像

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

    站点公告

    联系QQ:2227652475

    分享实用网络教程

    授人以鱼不如授人以渔

    人生倒计时