你很可能希望在你的网站/应用中使用图标，而 Quasar 提供了以下图标库的便捷开箱即用方法：Material 图标、Material 符号、Font Awesome、Ionicons、MDI、Eva 图标、Themify 图标、Line Awesome 和 Bootstrap 图标。但是你可以自己使用 为他人添加支持。

¥You’ll most likely want icons in your website/app and Quasar offers an easy way out of the box for the following icon libraries: Material Icons, Material Symbols, Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons, Line Awesome and Bootstrap Icons. But you can add support for others by yourself.

安装 Web 字体(Installing Webfonts)

¥Installing Webfonts

如果你只构建网站，那么使用 CDN（内容分发网络）方法是一个不错的选择。然而，在构建移动应用或 Electron 应用时，你很可能不希望依赖互联网连接，而 Quasar 提供了解决这个问题的方法：

¥If you are building a website only, then using a CDN (Content Delivery Network) approach can be an option you can follow. However, when building a mobile or Electron app, you most likely do not want to depend on an Internet connection and Quasar comes with a solution to this problem:

编辑 /quasar.config 文件：

¥Edit the /quasar.config file:

extras: [
  'material-icons'
]

Webfont 图标可通过 @quasar/extras 软件包获取。你无需将其导入到你的应用中，只需按照上述说明配置 /quasar.config 文件即可。

¥Webfont icons are available through @quasar/extras package. You don’t need to import it in your app, just configure the /quasar.config file as indicated above.

添加多个集合：

¥Adding more than one set:

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

要查看所有可用选项，请访问 GitHub 仓库。

¥For all available options, visit the GitHub repository.

现在你可以使用 QIcon 组件了。

¥You’re now ready to use the QIcon component.

使用 CDN 作为替代方案(Using CDN as alternative)

¥Using CDN as alternative

如果你想使用 CDN（内容分发网络），你只需在 /index.html 文件中添加指向 CDN URL 的样式标签即可。

¥If you want to make use of a CDN (Content Delivery Network), all you need to do is to include style tags in your /index.html file which point to the CDN URL.

如果你遵循此步骤，请不要在 /quasar.config file > extras 中添加你想要的图标集。使用 UMD 安装指南 并按照那里的说明编辑 /index.html。

¥In case you follow this path, do not also add the icon sets that you want in /quasar.config file > extras. Play with the UMD Installation Guide and edit /index.html as described there.

使用 Fontawesome-Pro(Using Fontawesome-Pro)

¥Using Fontawesome-Pro

如果你拥有 Fontawesome v6 Pro 许可证，并且想要使用它来代替 Fontawesome 免费版，请按照以下说明操作：

¥If you have a Fontawesome v6 Pro license and want to use it instead of the Fontawesome Free version, follow these instructions:

1. 在 Fontawesome 的用户账户页面中打开 关联账户部分 以获取 npm TOKENID（如有必要，请登录）。

   ¥Open the Linked Accounts section in Fontawesome’s user account page to grab the npm TOKENID (login if necessary).

2. 在 .npmrc 文件中创建或附加 TOKENID（文件路径与 package.json 相同）：

   ¥Create or append TOKENID into the .npmrc file (file path same as package.json):

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

3. 安装 Fontawesome webfonts：

   ¥Install Fontawesome webfonts:

$ yarn add @fortawesome/fontawesome-pro

4. 创建新的启动文件：

   ¥Create new boot file:

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

5. 编辑 /quasar.config 文件：

   ¥Edit the /quasar.config file:

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：

   ¥Edit /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/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. （可选）覆盖默认图标：

   ¥(Optional) Override default icons:

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

¥Since the default font-weight for fontawesome-pro is light or fal, some icons used by the framework components may not be desirable. The best way to handle this is to override it in the boot file that you created.

例如，要覆盖芯片的 fal 版本关闭图标，请执行以下操作：

¥For instance, to override the fal version of the close icon for chips, do this:

首先，在 Quasar Fontawesome v6 Pro 图标集源代码 中找到用于芯片关闭的图标。

¥First, find the icon used for chip close in Quasar Fontawesome v6 Pro icon-set source.

（或者，你可以检查你正在覆盖的组件的渲染函数内部。）

¥(Alternatively, you can check inside the render function of the component you are overriding.)

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

然后，在你的 /src/boot/fontawesome-pro.js 中覆盖它。

¥Then, override it in your /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'
}