iconfont 上传与使用

自己做项目的时候,总会涉及到字体图标的使用。之前尝试使用iconfont阿里的图标库来做,但是总是会因为一些细节的没有配置好导致图标全都显示黑框。因此记录一下正确的流程。由于目前想通过已有的svg文件来生成字体图标,所以暂时只有这一部分,之后有机会会接着更新其他的操作。

基于已有svg文件

新建项目

上传svg

接着上传字体图标,可以一次上传多个:

下载至本地

审核通过之后,选择font class类型,下载至本地

压缩包解压之后,将整个文件夹放到项目中(一般是放在静态资源文件夹asserts中)

接着直接在main.js文件中引入其中的iconfont.css文件:

在项目中使用

例如在App.vue文件中使用,class名为:iconfont+空格+字体图标的名称:

字体图标的名称其实就是下面这个:(也可以直接选中图标然后点击那个复制代码获得对应的名称)

相关推荐
忍者扔飞镖6 分钟前
欧服加载太慢了,咋整
前端·性能优化
鹏北海16 分钟前
Vue 3 超强二维码识别:多区域/多尺度扫描 + 高级图像处理
前端·javascript·vue.js
Android疑难杂症17 分钟前
一文讲清鸿蒙网络开发
前端·javascript·harmonyos
爱学习的程序媛19 分钟前
【JavaScript基础】Null类型详解
前端·javascript
前端一课24 分钟前
uniapp之WebView容器原理详解
前端
CryptoRzz27 分钟前
DeepSeek印度股票数据源 Java 对接文档
前端·后端
网络点点滴1 小时前
watch监视-ref基本类型数据
前端·javascript·vue.js
西洼工作室1 小时前
前端接口安全与性能优化实战
前端·vue.js·安全·axios
大布布将军1 小时前
《前端九阴真经》
前端·javascript·经验分享·程序人生·前端框架·1024程序员节
幸运小圣1 小时前
for...of vs for 循环全面对比【前端JS】
开发语言·前端·javascript