安装图标库

TIP

此页面仅指使用webfont图标 SVG图标不需要任何安装步骤。

您很可能想要在您的网站/应用中使用图标,而Quasar提供了一个开箱即用的简单方法,用于以下图标库: Material IconsFont AwesomeIonicons, MDIEva IconsThemify Icons

TIP

关于webfont图标,您可以选择安装一个或多个这些图标库。

安装Webfonts

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

编辑 /quasar.conf.js:

extras: [
  'material-icons'
]

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

添加多个集合(显示所有选项):

extras: [
  'material-icons',
  'material-icons-outlined',
  'material-icons-round',
  'material-icons-sharp',
  'mdi-v3',
  'ionicons-v4',
  'eva-icons',
  'fontawesome-v5',
  'themify',
  'line-awesome'
]

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

使用CDN作为替代

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

如果您遵循此路径,请不要在/quasar.conf.js > extras中添加所需的图标集。 只需编辑index.template.html如下。

使用Fontawesome-Pro

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

  1. 在Fontawesome的用户帐户页面中打开链接帐户部分以获取npm TOKENID(必要时登录)。
  2. .npmrc文件中创建或附加TOKENID(与package.json相同的文件路径):
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKENID
  1. 安装Fontawesome webfonts:
$ yarn add @fortawesome/fontawesome-pro
  1. 创建新的启动文件:
$ quasar new boot fontawesome-pro
  1. 编辑 /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-v5-pro'
}
  1. 编辑 /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'
  1. (可选)覆盖默认图标:

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

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

首先,在Quasar Fontawesome v5 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'