问题记录：使用iconfont字体图标

问题描述

我把在iconfont.cn上下载的图标代码放到应用上时，发现有的图标显示正常，有的图标刚开始显示正常，切换到另一个页面的时候就开始异常了，显示成了另一个图标的样子。我检查了图标的class，发现也没有冲突，而且样式写在了<style scope></style>里面，按理说也不会被其他的样式影响。
最后发现，在这个页面里面有一个组件A，组件A里面也引用了一个其他的iconfont，虽然两个图标的class不同，但是他们class里面的content是相同的。

/* 首页的样式 */
.icon-start::before {
  content: '\e602'
}
/* 组件的样式 */
.icon-up::before {
  content: '\e602'
}

即使他们使用了各自的iconfont样式，但是他们的iconfont样式都引用了相同的font-family

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

而两个页面都定义了同样名为"iconfont"的字体，后出现的字体就把前面的字体定义覆盖了

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

解决

这时我们只需要将两个文件的font-family名字修改为不同名字就可以了
参考：iconfont 字体生成原理及使用技巧