图标

Quasar Icon组件允许您轻松地将图标插入到其他组件或网页的任何其他区域，如您所愿。
目前Quasar支持：Material Icons 、Font Awesome、Ionicons、MDI and IcoMoon。

除IcoMoon（拥有许可证）外，您可以选择仅使用其中一个或使用多个。Quasar只需要知道哪个图标集用于其组件上面。

以下部分将看到我们是如何安装图标集的。
如果你最喜欢的字体图标没有在这里列出，请提交请求。

安装

如果您只是建立一个网站，那么使用CDN（内容传送网络）方式是您可以遵循的选项。但是，在构建移动或Electron应用程序时，您很可能不想依赖Internet连接，因此最好遵循以下步骤。

重要
由于IcoMoon的许可证及其自定义的构建选项，此图标字体不是开箱即用的。您需要使用他们的网站来创建自定义图标字体文件，然后将其复制到应用程序文件夹并将其导入应用程序插件（$ quasar new plugin icomoon）。

添加一个图标集

第一步是在您的网站/应用程序中创建一个图标集。为此，编辑/quasar.conf.js：

extras: [
  'material-icons'
]

图标集可通过quasar-extras软件包获得。 您不需要将它导入到您的应用程序中，只需按照指示配置/quasar.conf.js。

添加多个集合（显示所有选项）：

extras: [
  'material-icons',
  'mdi',
  'ionicons',
  'fontawesome'
]

Quansar使用的图标集

除非另有配置，否则Quasar使用Material Icons作为其组件的图标集。 然而，你可以告诉Quasar使用其他图标集，但一定要在你的网站/应用程序中包含该图标集（参见上面的步骤：添加一个图标集）。

假设我们包含Ionicons，我们希望Quasar将其用于其组件。 我们再次编辑/quasar.conf.js：

framework: {
  iconSet: 'ionicons'
}

完整的例子

以下是包含Ionicons&Fontawesome并告诉Quasar使用Fontawesome作为其组件的例子。

extras: [
  'ionicons',
  'fontawesome'
],
framework: {
  iconSet: 'fontawesome'
}

这将使您能够在您的应用程序中同时使用Ionicons和Fontawesome，并且所有Quasar组件都将显示Fontawesome图标。

包括来自CDN

如果您想使用CDN（内容传送网络），您只需要在指向CDN URL的index.template.html中包含样式标签。

如果你遵循这个路径，不要在/quasar.conf.js> extras中添加你想要的图标集。 只需编辑index.template.html如下。

下面的示例链接标签将包括Font Awesome v4.7.0图标。 为CDNs做一个谷歌搜索，以确保你包含最新版本。 以下仅为示例。

<!-- 在`/src/index.template.html`页面中-->

<head>
  ...

  <!-- Material图标的CDN示例 -->
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
  >

  <!-- Fontawesome 5.0.13的CDN示例 -->
  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous"
  >

  <!-- Ionicons的CDN示例 -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/ionicons@4.1.1/dist/css/ionicons.min.css"
  >
</head>

使用Fontawesome-Pro

如果你有一个Fontawesome 5 Pro许可证，并且想用它来代替Fontawesome Free版本。 遵循这个指示。

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

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

  1. 安装Font Awesome web字体：

    $ yarn add @fortawesome/fontawesome-pro-webfonts
    # or:
    $ npm install @fortawesome/fontawesome-pro-webfonts

  2. 创建新的App插件：

    $ quasar new plugin fontawesome-pro

  3. 编辑 /quasar.conf.js:

    plugins: [
      ...
      'fontawesome-pro' // Add app plugin
    ],
    extras: [
      // 'fontawesome' // 禁用免费版本!
    ],
    framework: {
      // 如果你想让Quasar为其图标使用Font Awesome
      iconSet: 'fontawesome-pro' // 需要Quasar v0.15.6+
    }

  4. 编辑 /src/plugins/fontawesome-pro.js:

    // required
    import '@fortawesome/fontawesome-pro-webfonts/css/fontawesome.css'
    import '@fortawesome/fontawesome-pro-webfonts/css/fa-light.css'
    // 你也想要这些吗?
    // import '@fortawesome/fontawesome-pro-webfonts/css/fa-brands.css'
    // import '@fortawesome/fontawesome-pro-webfonts/css/fa-solid.css'
    // import '@fortawesome/fontawesome-pro-webfonts/css/fa-regular.css'

    export default () => {
      // 保持空白或让一些东西很酷。
    }

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

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

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

首先，在Quasar的quasar/icons/fontawesome-pro.js中找到用于碎片关闭的图标

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

chip: {
  close: 'fal fa-times-circle'
},

然后，在/src/plugins/fontawesome-pro.js中覆盖它

import '@fortawesome/fontawesome-pro-webfonts/css/fontawesome.css'
import '@fortawesome/fontawesome-pro-webfonts/css/fa-solid.css'
import '@fortawesome/fontawesome-pro-webfonts/css/fa-light.css'

export default ({ Vue }) => {
  Vue.prototype.$q.icon.chip.close = 'fas fa-times-circle'
}

基本用法

我们来看看我们如何使用QIcon组件。 别忘记检查上面说的的如何安装图标集的步骤，否则它们不会显示！

<!-- Material图标没有前缀 -->
<q-icon name="thumb_up" />

<!-- Ionicons有"ion-"、"ion-logo"、"ion-md-" 或 "ion-ios-"作为前缀 -->
<q-icon name="ion-heart" />

<!-- Fontawesome图标有"fa-"前缀 -->
<q-icon name="fa-id-card" />

<!-- MDI图标有"mdi-"前缀 -->
<q-icon name="mdi-account-card-details" />

<!-- IcoMoon图标有"icon-"前缀 -->
<q-icon name="icon-chrome" />

<!--
  或者如果您更喜欢非自闭合标签版本
  （允许添加QPopover或QTooltip）：
-->
<q-icon name="thumb_up">
  <q-tooltip>Some tooltip</q-tooltip>
</q-icon>

对于不同Quasar组件上的“icon”属性，您将无法为每个平台指定图标，但您可以通过以下方法获得相同的效果：

<q-item-side
  :icon="$q.theme === 'mat' ? 'settings' : 'ion-ios-gear-outline'"
/>

Vue属性

Vue属性 类型 说明
name 字符串 要使用的图标的名称（对于两个Quasar主题）。
color 字符串 Quasar调色板中的一种颜色。
size 字符串 例如：’12px’，’3.2rem’，’14pt’。

尺寸和颜色

所有图标都是字体图标。 这意味着你可以通过操纵font-sizeCSS属性来改变大小。 而且，它们继承了当前使用的CSScolor。

<q-icon name="mail" style="font-size: 25px" />

<div style="color: #a2e2e3">
  ...
  <!-- 继承color #a2e2e3: -->
  <q-icon name="alarm" />
</div>

可以通过两种方式指定Quasar调色板中的颜色：

<q-icon name="mail" class="text-red" />
<!-- 或使用`color`属性: -->
<q-icon name="alarm" color="red" />
<q-icon name="alarm" color="green-2" />

还有一个“size”属性：

<q-icon name="wifi" size="2rem" />
<q-icon name="delete" size="24px" />

简单说明

名称 前缀 示例 说明
material-icons 无 thumb_up 注意下划线字符而不是破折号或空格
ionicons ion-, ion-md-, ion-ios-, ion-logo- ion-heart, ion-logo-npm, ion-md-airplane 使用QIcon代替<ion-icon>组件; Logo图标需要’ion-logo-‘前缀
fontawesome fa[s,r,l,b] fa- “fas fa-ambulance” QIcon“name”属性与Fontawesome docs示例中的“class”属性值相同（它们显示<i>标签）
mdi mdi- mdi-alert-circle-outline 注意使用短划线字符

更多示例

使用HTML原生style属性：

<q-icon name="thumb_up" style="font-size: 5rem;" />

使用HTML原生class属性：

<q-icon name="thumb_up" class="big-icon" />

注意
要创建必要的CSS类，您需要在组件的样式部分中定义类，如下所示。 但请注意CSS类冲突。

<style lang="stylus">
.big-icon
  font-size: 5rem
</style>

添加一个click事件句柄。 记住我们想捕获一个原生DOM事件而且这是一个Vue组件，所以我们使用‘.native’ modifier:

<q-icon
  name="map"
  @click.native="handle"
/>

Stylus变量 排版