一、下载图标图

二、引入项目中

将下载的图标库重命名，并放至assets文件夹

三、引入方式

3.1、Unicode方式

unicode是字体在网页端最原始的应用方式

• 兼容性最好，支持ie6+，及所有现代浏览器
• 支持按字体的方式去动态调整图标大小，颜色等等
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色

1）在main.js中引入

import '@/assets/iconfont/iconfont.css'

2）在页面中使用

1、标签形式使用

<i class="iconfont">&#xedb8;</i>

必须添加上iconfont类名，将在阿里图标复制代码粘贴到标签内即可

2、伪元素形式使用

<template>
    <div class="index">
        <i class="icon"></i>
    </div>
</template>

<style scoped lang="scss">
.icon {
   &::after {
        content: '\edb8';
        font-family: 'iconfont'!important;
        font-size: 16px;
        font-style: normal;
    }
}
</style>

必须设置font-family: 'iconfont';，content中的内容就是：\ + &#x后面的edb8，即'\edb8

3.2、Font class方式

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题

• 兼容性良好，支持ie8+，及所有现代浏览器
• 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用
• 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的

1）在main.js中引入

import '@/assets/iconfont/iconfont.css'

2）在页面中使用

必须添加上iconfont类名，将在阿里图标复制代码粘贴到class中

<i class="iconfont icon-a-02pinglun2"></i>

3.3、Symbol方式

平台目前推荐的用法，做了一个svg的集合

• 支持多色图标了，不再受单色限制
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式
• 兼容性较差，支持 ie9+,及现代浏览器
• 浏览器渲染svg的性能一般，不如png

1）在main.js中引入

import '@/assets/iconfont/iconfont.js'

2）在页面中使用

必须添加上iconfont类名，将在阿里图标复制代码粘贴到xlink:href中

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