问题描述
我把在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 字体生成原理及使用技巧
