700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式

在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式

时间:2019-04-11 20:44:59

相关推荐

在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式

在 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 修改文件路径应该可以了。(我没有修改,别问为什么,手动狗头)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。