iconfont 上传与使用

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

基于已有svg文件

新建项目

上传svg

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

下载至本地

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

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

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

在项目中使用

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

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

相关推荐
不吃鱼的羊7 分钟前
DaVinci配置NVM模块
前端·javascript·网络
一坨阿亮10 分钟前
使用e-tree开发树形穿梭框
javascript·vue.js·elementui
excel17 分钟前
为什么需要构建工具(Webpack / Vite 的本质)
前端
lang2015092817 分钟前
Java SAX 流式解析全解:从原理到 EasyExcel 实战
java·前端·javascript
Rain50926 分钟前
2.4. PostgreSQL 数据库连接与实战指南
前端·数据库·人工智能·后端·postgresql·数据分析
console.log('npc')26 分钟前
Codex 桌面端接入 Headroom 压缩代理完整教程
前端·vscode
独泪了无痕1 小时前
Vue集成uuid生成唯一标识实践指南
前端·vue.js
yuanyxh9 小时前
Mac 软件推荐
前端·javascript·程序员
万少9 小时前
AtomCode开发微信小程序《谁去呀》 全流程
前端·javascript·后端
某人辛木9 小时前
Web自动化测试
前端·python·pycharm·pytest