您很可能想要在您的网站/应用中使用图标，而Quasar提供了一个开箱即用的简单方法，用于以下图标库： Material Icons、 Material Symbols、 Font Awesome、 Ionicons, MDI、 Eva Icons 和 Themify Icons。

安装Webfonts

如果您只是建立一个网站，那么使用CDN（内容分发网络）方法是您可以遵循的选项。 但是，在构建移动应用或Electron应用时，您很可能不希望依赖Internet连接，而Quasar会提供此问题的解决方案：

编辑 /quasar.conf.js:

extras: [
  'material-icons'
]

Webfont图标可通过 @quasar/extras 包获得。 您无需在应用程序中导入它，只需如上所示配置/quasar.conf.js。

添加多个集合：

extras: [
  'material-icons',
  'mdi-v6',
  'ionicons-v4', // 上一个webfont在v4.6.3中可用
  'eva-icons',
  'fontawesome-v6', // 或, 'fontawesome-v5'
  'themify',
  'line-awesome',
  'bootstrap-icons'
]

有关所有可用选项，请访问GitHub存储库.

您现在已准备好使用QIcon 组件。

使用CDN作为替代

如果您想使用CDN（内容分发网络），您需要做的就是在index.template.html中包含样式标记，该样式标记指向CDN URL。

如果您遵循此路径，请不要在/quasar.conf.js > extras中添加所需的图标集。 使用UMD安装指南并编辑index.template.html如上面所述。

使用Fontawesome-Pro

如果您拥有Fontawesome 5/6 Pro许可证并想要使用它而不是Fontawesome免费版本，请按照以下说明操作：

1. 在Fontawesome的用户帐户页面中打开链接帐户部分以获取npm TOKENID（必要时登录）。
2. 在 .npmrc文件中创建或附加TOKENID（与package.json相同的文件路径）：

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

3. 安装Fontawesome webfonts：

$ yarn add @fortawesome/fontawesome-pro

4. 创建新的启动文件：

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

5. 编辑 /quasar.conf.js:

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

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

// required
import '@fortawesome/fontawesome-pro/css/fontawesome.css'
import '@fortawesome/fontawesome-pro/css/light.css'
// do you want these too?
// import '@fortawesome/fontawesome-pro/css/brands.css'
// import '@fortawesome/fontawesome-pro/css/solid.css'
// import '@fortawesome/fontawesome-pro/css/regular.css'
// Fontawesome-pro v6
// import '@fortawesome/fontawesome-pro/css/thin.css'
// import '@fortawesome/fontawesome-pro/css/duotone.css'

7. （可选）覆盖默认图标：

由于fontawesome-pro的默认font-weight是light或fal，因此框架组件使用的某些图标可能并不理想。 处理此问题的最佳方法是在您创建的引导文件中覆盖它。

例如，要覆盖碎片组件(chips)关闭图标的fal版本，请执行以下操作：

首先，在Quasar Fontawesome v5 Pro icon-set source 或 Fontawesome v6 Pro icon-set source中找到用于碎片组件(chips)关闭的图标。

（或者，您可以在要覆盖的组件的render函数内部进行检查。）

// example
chip: {
  remove: 'fal fa-times-circle'

然后, 在/src/boot/fontawesome-pro.js中覆盖它

import Vue from 'vue'

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
Vue.prototype.$q.iconSet.chip.remove = 'fas fa-times-circle'