阿里矢量图库使用方法

step1：找到你需要的图标，并将需要的图标加入购物车

鼠标放在你需要的图标上就会显示加入购物车标识

step2 点击右上角购物车标志，将需要的icon添加☞项目

这里也可以点击“下载代码”按钮下载需要引入的文件，添加☞项目方便后续添加新的icon

如果没有项目点击“添加至项目新建”

step3 下载需要引入的文件

导航栏资源管理==》我的项目==》点击下载==》下载至本地

下载解压后的文件目录：

demo_index.html是示例教程可以先打开看看

.ttf .woff .woff2 为了兼容不同浏览器是表示icon的一些格式文件吧，类似平常我们设置字体样式一样，也需要对应的样式文件（个人理解）

阿里矢量图库使用方法

1.1 在html文件中引入

1.2 在vue项目中引入

2.icomoon使用方法

1.1 在html文件中引入

step1 在工程根目录新建一个文件夹，与.html同级目录

将解压出的文件除去带有demo字样的其他文件，复制到新建的文件夹中

step2 引入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- -----------------看这里🌼---------------------- --><link rel="stylesheet" href="./alifonts/iconfont.css" type="text/css" /><!-- 使用灰色图标，只需要加载iconfont.css 文件就可以使用了 --><!-- -----------------看这里🌼---------------------- --><script src="./alifonts/iconfont.js"></script><!-- 使用彩色图标一般使用svg格式引入，需要添加这个js文件 -->
</head><body><!-- --------这个是unicode引用(灰白黑)🌼------><span class="iconfont">&#xf4cf;</span><!-- --------这个是svg方式引用(彩色)🌼------><svg class="icon" aria-hidden="true"><use xlink:href="#icon-aixin"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-baocun"></use></svg>
</body></html>

效果

补充：

1.font-class引用方式这里没有做测试，具体的使用方法都可以参考解压文件中的demo_index.html

2.unicode 兼容性好，svg兼容性ie9+

3.这里的icon可以当作字体一样来使用，设置字体样式的属性，在icon身上同样有效

1.2 在vue项目中引入

step1 在项目src->assets下新建文件夹fonts 将一下文件复制到新建文件夹中（与1.1相似）

step2 在main.js中引入

import Vue from 'vue'
import App from './App'
import router from './router'
//------------看这里是🍟🍔🌭-------/
// 在这里引入css 和js js对应svg格式(彩色)
import './assets/fonts/iconfont.css'
import './assets/fonts/iconfont.js'
router.push('home')Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

step3.在home.vue中使用

<template><div>hello home home home home page!<i class="iconfont">&#xf4cf;</i><svg class="icon" aria-hidden="true"><use xlink:href="#icon-aixin"></use></svg><button @click="getnewpage">homepage</button></div>
</template>

效果：