安装图标库

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

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

TIP

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

安装

如果您只是建立一个网站,那么使用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'
]

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

使用CDN作为替代

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

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

下面的示例link标签将包含Fontawesome v5.6.3图标。 在Google上搜索CDN以确保包含最新版本。 以下只是示例。

<!-- in `/src/index.template.html` -->

<head>
  ...

  <!-- CDN example for Material Icons -->
  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  >

  <!-- CDN example for Material Icons Outlined (similar thing for Round and Sharp versions) -->
  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
    rel="stylesheet"
  >

  <!-- CDN example for Fontawesome 5.6.3 -->
  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous"
  >

  <!-- CDN example for Ionicons -->
  <link
    href="https://unpkg.com/ionicons@4.5.0/dist/css/ionicons.min.css"
    rel="stylesheet"
  >
</head>

使用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'