iconfont 上传与使用

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

基于已有svg文件

新建项目

上传svg

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

下载至本地

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

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

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

在项目中使用

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

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

相关推荐
共享家952714 小时前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
Halo_tjn16 小时前
基于封装的专项 知识点
java·前端·python·算法
有来技术17 小时前
Spring Boot 4 + Vue3 企业级多租户 SaaS:从共享 Schema 架构到商业化套餐设计
java·vue.js·spring boot·后端
东东51618 小时前
学院个人信息管理系统 (springboot+vue)
vue.js·spring boot·后端·个人开发·毕设
m0_7482299918 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒18 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..19 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
hhy_smile19 小时前
Class in Python
java·前端·python
小邓吖19 小时前
自己做了一个工具网站
前端·分布式·后端·中间件·架构·golang
南风知我意95719 小时前
【前端面试2】基础面试(杂项)
前端·面试·职场和发展