vue引入阿里巴巴icon

__不靠谱先生

已于 2024-05-10 14:59:22 修改

阅读量544

点赞数

文章标签： vue.js

于 2022-01-06 14:48:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43871703/article/details/122343398

版权

本文介绍了如何从阿里巴巴Iconfont下载包并正确地将图标复制到assets文件夹。关键点在于理解如何调整font-face中src路径，确保在main.js引入iconfont.css时引用正确。务必注意src路径要相对于引入文件，而非main.js本身。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
从阿里巴巴icon里面下载的包文件吧所有的图标打包下载

把框里面的文件copy进入assets文件；

在main.js 引入iconfont.css 即可
在这里插入图片描述
踩坑点（很重要）
src 里的路径是以引入的文件作为参考，如果在main里引入按照main的路径去找相关字体的路径，

@font-face {
  font-family: "iconfont"; /* Project id 4492087 */
  src: url('./static/font/icon/iconfont.woff2?t=1715323269018') format('woff2'),
       url('./static/font/icon/iconfont.woff?t=1715323269018') format('woff'),
       url('./static/font/icon/iconfont.ttf?t=1715323269018') format('truetype'),
       url('./static/font/icon/iconfont.svg?t=1715323269018#iconfont') format('svg');
}