Iconfont中添加新的矢量图标

##iconfont中追加矢量图标

在页面不断的更新改变的过程中以及在码页面的时候，避免不了的会遗落一些的iconfont图标，这个时候应该怎么办？

方法一

这个方法是最不需要动脑但是确实最low和最麻烦的方法就是直接在重新下载新的iconfont文件跟换就的文件

方法二（推荐使用的方法）

增加之前的iconfont文件目录

图一

增加之前的iconfont.css中的代码

代码块一

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1638183563598') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-a-doubleright:before {
  content: "\e624";
}

.icon-a-doubleup:before {
  content: "\e625";
}

.icon-a-doubledown:before {
  content: "\e626";
}

新增加confront开始步骤

第一步：在iconfont的官网上找到对应新增的矢量图标

官网地址（https://www.iconfont.cn/）
图二：

点击下载代码，将代码下载到本地

第二步：

将下载好的矢量图标的文件移到font文件中；更改后缀（避免文件重名），

第一种就是上面的文件中只用.ttf文件，就只需要将下载的新的文件（图四）中.ttf文件改名（iconfont-zx.ttf）即可新的目录如下

图三：

图四

之后我们将新下载的文件（图四）中的iconfont.css中的代码粘贴到（图三）中的iconfont.css文件中；最终得到的iconfont.css中的代码为（即代码块一更新如下）

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1638183563598') format('truetype');
}
@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont-zx.ttf?t=1638184427387') format('truetype');
} // 引入新的iconfont-zx.ttf文件

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-a-doubleright:before {
  content: "\e624";
}

.icon-a-doubleup:before {
  content: "\e625";
}

.icon-a-doubledown:before {
  content: "\e626";
}
.icon-a-ziyuan8:before { // 新的iconfont
  content: "\e605";
}

第三步：

已经可以使用新添的图标了

<i class="iconfont icon-a-ziyuan8"></i> // class中一定要包含iconfont

以下是另一种情况上面的文件中不仅仅有.ttf文件可能还有.woff;.woff2；.eot;.svg文件更新的方法和上面只有一个文件的方法是一样的（保留需要的文件.woff;.woff2；.eot;.svg）即可

其中有四个文件是必要的其他的都可以不要

其中
这四个文件是必要的，iconfont-zx.woff2这个文件需不需要是要看你的iconfon.css文件中
有没有使用woff2看iconfont.css文件中有没有在@font-face 的src中引入woff2

@font-face {
  font-family: "iconfont";
  src: url('iconfont.woff2?t=1638184427387') format('woff2'),
       url('iconfont.woff?t=1638184427387') format('woff'),
       url('iconfont.ttf?t=1638184427387') format('truetype');
}

即为使用了woff2

之后与单个文件一样

注意：在iconfont.css中的矢量图标的名字要与span标签中的class中的名字相同。