为了前端页面的美观性，我们可以在前端项目中引入字体图标库，本文讲的是iconfont图标库
1、创建iconfont项目库

项目设置如下

2、图标加入iconfont项目库

添加至项目

3、图标项目下载到本地，选择symbol,此模式可以使用彩色图标，三种模式的具体使用文中就不细细讲解了，项目库里使用帮助讲解非常详细自行查看

4、在vue项目下的资源文件夹下新建iconfont文件夹，将下载后的文件解压将一下文件拷贝到项目的iconfont文件夹下，


接下来将其余文件引入到iconfont.css文件中，将iconfont.css文件里名为的iconfont文件引用加上./assets/iconfont/前缀，如下：

 src: url('./assets/iconfont/iconfont.eot?t=1660201117264'); /* IE9 */

在main.ts中引入iconfont.css和iconfont.js，如果不使用多色图标的话可以不用引入iconfont.js文件

// 引入阿里云字体图标css
import './assets/iconfont/iconfont.css';
import './assets/iconfont/iconfont.js';

此步骤只有使用多色图表标的时候才需要，在app.vue中加入以下样式

 .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

5、至此iconfont图标库的本地引用就结束了，接下来就是在页面的使用了
1、多色图标的使用，use元素中的 xlink:href 值为图标的class名称，记得前面需要加上***“#”***,head-portrait是图标自定义样式，属性和字体样式使用类似

<svg class="icon head-portrait" aria-hidden="true">
     <use xlink:href="#icon-icontouxiang-copy "/>
</svg> 

  .head-portrait {
    font-size: 38px;
    color: #2d5afa;
  }

2、单色图标也可以使用,icon-icontouxiang-copy是图标的class名称，自定义样式，属性和字体样式使用类似

<span class="iconfont icon-icontouxiang-copy "></span>