提示
本页介绍的仅为使用 webfont 图标。 Svg 图标 不需要任何安装步骤。
您很可能希望在您的网站/应用程序中使用图标，Quasar 为以下图标库提供了开箱即用的简便方法：Material 图标，Material 符号，Font Awesome，Ionicons，MDI，Eva 图标，Themify 图标，Line Awesome 和 Bootstrap 图标。但您可以 自行添加其他支持。
提示
对于 webfont 图标，您可以选择安装一个或多个这些图标库。
安装 Webfonts
如果您只构建网站，那么使用 CDN（内容交付网络）方法可能是您可以遵循的一种选择。但是，在构建移动应用程序或 Electron 应用程序时，您很可能不希望依赖于互联网连接，Quasar 提供了解决此问题的方案。
编辑 /quasar.config 文件
extras: [
'material-icons'
]Webfont 图标可通过 @quasar/extras 包获取。您不需要在您的应用程序中导入它，只需按照上面所示配置 /quasar.config 文件即可。
添加多个集
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 存储库。
现在，您已准备好使用 QIcon 组件。
使用 CDN 作为替代方案
如果您要使用 CDN（内容交付网络），您需要做的就是在您的 /index.html 或 /src/index.template.html 文件中包含指向 CDN URL 的样式标记。
如果您遵循此路径，请不要在 /quasar.config 文件 > extras 中添加您想要的图标集。请尝试使用 UMD 安装指南 并按照那里的描述编辑 /index.html 或 /src/index.template.html。
使用 Fontawesome-Pro
如果您拥有 Fontawesome v6 Pro 许可证，并且想使用它而不是 Fontawesome 免费版本，请遵循以下说明。
- 在 Fontawesome 的用户帐户页面打开 链接帐户部分 获取 npm TOKENID（如有必要，请登录）。
- 在
.npmrc文件（文件路径与 package.json 相同）中创建或追加 TOKENID。
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKENID- 安装 Fontawesome 网页字体
$ yarn add @fortawesome/fontawesome-pro- 创建新的启动文件
$ quasar new boot fontawesome-pro [--format ts]- 编辑
/quasar.config文件
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'
}- 编辑
/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'- (可选) 覆盖默认图标
由于 fontawesome-pro 的默认 font-weight 为 light 或 fal，框架组件使用的某些图标可能不理想。处理此问题的最佳方法是在您创建的启动文件中覆盖它。
例如，要覆盖芯片关闭图标的 fal 版本，请执行以下操作
首先，找到 Quasar Fontawesome v6 Pro 中用于芯片关闭的图标 图标集源代码.
(或者，您可以在要覆盖的组件的渲染函数中进行检查。)
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'
}