1、使用线上的阿里iconfont图标库

1.打开 iconFont官网 选择自己喜欢的图标，并且添加购物车
2.点击购物车，添加至项目

3 生成链接
4在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址
如：<link rel="stylesheet" href="http://at.alicdn.com/t/font_657604_xujhsb9zlug3z0k9.css">
5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。
如：<i class="icon iconfont icon-wode"></i>

2、但是考虑网络及用户体验 阿里iconfont下载本地使用

1 阿里iconfont图标直接下载到本地

2 用来存放字体图标的本地文件在src/assets文件下创建iconfont文件夹
把这些文件放入文件夹

3.如过项目中没有下载 css-loader 依赖包，就进行下载，否则会报错npm install css-loader -D
4 当然也可以放在不同的文件夹下，但是需要注意的是必须修改iconfont.css中@font-face中src引入的字体路径为本地路径，现在默认的是绝对路径iconfont.css文件中改路径

5 在main.js中引入iconfont.css文件,如：import 'xxx/xxx/xxx/iconfont.css'

6直接使用

<template>   
<div style="background-color:cadetblue;color:#333;padding:30px">
    <p><i class="iconfont">&#xe633;</i> Unicode </p>
    <p><i class="iconfont icon-fanhuidingbu"></i> Font class </p>
    <p style="font-size:2em;">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fanhuidingbu"></use>
      </svg> Symbol </p>   </div> </template>
    <script> // Font class import "../assets/iconfont/iconfont.css";、 // Symbol  import "../assets/iconfont/iconfont.js"; export default {  
data() {
    return {};   } }; </script>

<style scoped>
* {   font-size: 24px; } /* 下面的样式可以单独写，然后引入 */ @font-face { /* Unicode  */   font-family: "iconfont";   src: url("../assets/iconfont/iconfont.eot");   src:
url("../assets/iconfont/iconfont.eot?#iefix")
format("embedded-opentype"),
    url("../assets/iconfont/iconfont.woff2") format("woff2"),
    url("../assets/iconfont/iconfont.woff") format("woff"),
    url("../assets/iconfont/iconfont.ttf") format("truetype"),
    url("../assets/iconfont/iconfont.svg#iconfont") format("svg"); } .iconfont {   font-family: "iconfont" !important;   font-size: 1em;  
font-style: normal;   -webkit-font-smoothing: antialiased;  
-moz-osx-font-smoothing: grayscale; } .icon {   width: 2em;   height: 2em;   vertical-align: -0.15em;   fill: currentColor;   overflow:
hidden; } </style>

3、使用vue-awesome

1.首先安装vue-awesome依赖包

npm install vue-awesome

2.在main.js文件下 在github上可以明确看到如果考虑项目大小，只导入用于减少包大小的图标

import ‘vue-awesome/icons/flag’ 或者不考虑大小

直接使用 <icon name=”beer”></icon>

4、使用IconMoon

挺好用 iconMoon可以生成自己的矢量图，这点是我喜欢的
1.如果想要直接使用它们自带的官方图标
选择我们想要的图标之后，点击右下角的Generate Font F


这时会看到我们已经选择的图标，在这里可以修改名称等，然后点击右下角的下载
2接下来在vue项目中创建文件夹，打开style.css样式，修改引入字体的路径（不同路径写的方式不一样，需要注意）

3在main.js中全局引入
import ‘@/assets/css/icomoon/style.css’
如果想要使用我们自己画的.svg格式的矢量图图标，点击Import Icons
导入我们本地的.svg格式的图标（注意，矢量图是用矢量线画的，png,jpg等使用像素来的，不可以直接用png转成svg格式，否则不成功）
引入之后，接来下就和上面的步骤一样了。
4直接使用

参考：https://www.jqhtml.com/45617.html