阿里iconfont如何多次引用！！！

2022-05-27 175 阅读1分钟

www.iconfont.cn/

选择icon添加到购物车
从购物车选择下载代码，download
解压获取iconfont.css 和iconfont.ttf

3. 这俩个文件放入项目文件夹，引用css
@import '@/assets/iconfont/iconfont.css'
4. 代码使用
<i class="iconfont icon-xxx"></i>
5. 再次选择icon 循环1-2
6. 修改iconfont.ttf 名称防止和上次重名，在导入第三步如：iconfont2.ttf 7. 打开项目中的iconfont.css，把这次获取到的iconfont.css 里面的内容复制到项目里

//原有iconfont
@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1653617046953') format('truetype');
}
//新增iconfont
@font-face {
  font-family: "iconfont2"; /* Project id  */
  src: url('iconfont2.ttf?t=1653617046953') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconfont1 {
  font-family: "iconfont1" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-jiaojieban:before {
  content: "\e606";
}

完成

##以前多次引用方式（步骤7）

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