图标

Quasar Icon组件允许您轻松地将图标插入到其他组件或网页的任何其他区域,如您所愿。
目前Quasar支持:Material IconsFont AwesomeIoniconsMDI 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-weightlightfal,因此框架组件使用的某些图标可能并不理想。 处理此问题的最佳方法是在您创建的插件中覆盖它。

例如,要覆盖碎片关闭图标的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"
/>