安装图标库

Quasar 已经提供了几套开箱即用的图标库: Material Icons , Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons, Line Awesome 和 Bootstrap Icons.但是您任然可以自行添加其他的图标库。

安装字体图标库

如果您只是构建一个网站，那么您可以使用 CDN 来引用图标资源，但是如果您需要构建一个离线的手机 app 或者 electron 程序，那么您可能不希望它的图标依赖联网的服务。Quasar 为您解决了这个问题：

编辑 /quasar.config.js 文件中的:

extras: [
  'material-icons'
]

字体图标会通过 @quasar/extras来提供，您不需要引入他们，只需像上述方式配置/quasar.config.js即可，也可以向下面这样同时开启多个图标库：

extras: [
  'material-icons',
  'mdi-v6',
  'ionicons-v4', // last webfont was available in v4.6.3
  'eva-icons',
  'fontawesome-v6',
  'themify',
  'line-awesome',
  'bootstrap-icons'
]

全部可用图标库列表请见： GitHub

您现在可以在 QIcon 组件中使用这些图标了

使用 CDN 替代

如果您想使用 CDN，您自需要在index.template.html中使用 style/link 标签去引入 CDN 资源，但是不要同时在 /quasar.config.js > extras中配置。按照UMD Installation Guide页面的示例修改index.template.html文件。

使用 Fontawesome-Pro

如果您有 Fontawesome v6 Pro 的许可证，您可以按照下述步骤使用 Pro 版本来替换免费版本：

1. 打开网站 Linked Accounts section的用户界面 npm TOKENID
2. 将复制的 TOKENID 复制到.npmrc（若没有此文件先创建它，文件位于 package.json 同级目录）

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKENID

3. 安装 Fontawesome webfonts 依赖:

 yarn add @fortawesome/fontawesome-pro

4. 创建一个新的 boot 文件:

 quasar new boot fontawesome-pro [--format ts]

5. 将 boot 文件添加到 /quasar.config.js:

boot: [
  ...
  'fontawesome-pro' // Add boot file
],
extras: [
  // 'fontawesome-v6' // Disable free version!
],
framework: {
  // if you want Quasar to use Fontawesome for its icons
  iconSet: 'fontawesome-v6-pro'
}

6. 编辑 /src/boot/fontawesome-pro.js:

// 必须的
import '@fortawesome/fontawesome-pro/css/fontawesome.css'
import '@fortawesome/fontawesome-pro/css/light.css'
// 可选的
// import '@fortawesome/fontawesome-pro/css/thin.css'
// import '@fortawesome/fontawesome-pro/css/duotone.css'
// import '@fortawesome/fontawesome-pro/css/brands.css'
// import '@fortawesome/fontawesome-pro/css/solid.css'
// import '@fortawesome/fontawesome-pro/css/regular.css'

7. （可选的）重写默认的图标：

由于 fontawesome-pro 默认的 font-weight 是 light 或 fal ，导致一些图标用在组件中可能不太美观，最好在 boot 文件中覆盖掉它。

例如

// 示例
chip: {
  remove: 'fal fa-times-circle'

然后在 /src/boot/fontawesome-pro.js 中重写它。

import '@fortawesome/fontawesome-pro/css/fontawesome.min.css'
import '@fortawesome/fontawesome-pro/css/solid.min.css'
import '@fortawesome/fontawesome-pro/css/light.min.css'

// example
export default ({ app }) => {
  app.config.globalProperties.$q.iconSet.chip.remove = 'fas fa-times-circle'
}