阿里矢量图本地使用方法

前言

随着上次阿里矢量图标库维护，在线调用矢量图的方式也被随之下架，那么就会有很多小白站长要问了，功能下线了我还怎么用啊，那么我今天来教一下大家另一种使用方法，废话不说直接开始。

教程

图标下载

1.选择自己需要的图标

• 我们首先来到  阿里矢量库iconfont  在右上角搜索框搜索自己需要的图标。
• 找到自己喜欢的图标后将鼠标移动到图标上方
• 点击最上面的添加入库（购物车图标）

2.下载到本地

• 我们在所有图标都选择完成后点击站点右上角购物车

• 在右侧弹出的侧边栏里会显示你选择好的图标，确认无误后点  击下载代码

部署图标

3.上传js代码

• 将下载完毕的压缩包解压并打开  打开后我们会看到有 6个文件 这里我们只用到.html文件和.js文件

• 双击用浏览器打开.html文件，我们可以看到官方给了三种使用教程以及说明，这里我们选择最后一种

• 将文件里的.js文件上传到你需要保存的地方，例如服务器、存储桶等能够正确访问到的地方（我们这以上传到网站根目录自定义文件夹为例）
• 上传好以后用连接访问一下确保连接无误。（例如我的为例  我上传到了根目录下的自定义文件夹那么我通过链接访问就是这样的）显示js代码即为连接正确。

4.引入js

我们来到网站后台  子比主题设置  全局&功能  自定义代码  将下方代码放到   自定义底部HTML代码   中，把   你的js文件地址  替换为你刚才js文件的路径   然后保存。

<script src="你的js文件地址"></script>

5.添加css

将下方代码放到  子比主题设置  全局&功能  自定义代码   自定义css样式中。

/*阿里矢量css*/
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

6.添加图标。

• 我们来到后台  外观   菜单页面  点击菜单选项的小箭头

• 在导航栏输入框内填入下方代码

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

• 修改图片中蓝色选中的字符（即  #icon-xxx  ）并替换为你想要设置图标的标签
• 图标标签在我们刚才打开的.html页面中查看，文字后边 # 开头到最后的就是这个图标的标签

• 例如：我要在首页选项下添加第二行第三个图标，那么我就要讲 代码中的 #icon-xxx  替换为 #icon-shouye
• 全部设置完毕后我们点击右下角的  保存菜单  刷新首页就可以看到效果了

添加完成后图标不显示 / 部分显示