在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont
1. symbol 方式2. font class 方式(未实践)1. symbol 方式
首先说明一下,这种方法不算规范,但是能用。就是将 iconfont 当成一个插件来使用。
1. 将 iconfont 下载的字体图标压缩包解压下来,找到 iconfont.js
2. 将 iconfont.js 文件复制到 项目中的 src/boot 文件夹下
3. 找到项目的 quasar.conf.js 文件,在 boot 下 添加 iconfont
4. 然后按照官方提供的步骤使用即可生效。
2. font class 方式(未实践)
这个方式 按我自己的思路,提一下,没有具体实操,理论上可能可行(不可行的话不要喷我 嘤嘤嘤~~)。
目前Quasar支持:Material Icons 、Font Awesome、Ionicons、MDI and IcoMoon。
根据 quasar 官网 的说明
也就是说,quasar支持的字体图标库是从 quasar-extras 包中导入的,那么我们可以尝试将 iconfont 文件 导入到 quasar-extras 包。
找到项目中的这个 extras 包,在node_modules/@quasar/extras目录下,我们发现 这里面就是 quasar 支持的字体图标库。
在这个目录下,新建一个文件夹 iconfont
将我们从 iconfont官网 下载的 iconfont 解压后的 iconfont.css 文件 放到我们新建的 iconfont 文件夹中。
在 quasar.config.js 文件中,在 extract 添加 iconfont
这个时候提示 iconfont.css 中路径错误
打开 iconfont.css 修改文件路径应该可以了。(我没有修改,别问为什么,手动狗头)