QIcon 组件允许您轻松地在其他组件或网页的任何其他区域插入图标。Quasar 支持开箱即用的：Material Icons , Material Symbols , Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons, Line Awesome 和 Bootstrap Icons.

此外，您可以自己添加支持 任何图标库。

Quasar 中有多种类型的图标：基于网络字体的、基于 SVG 的和基于图像的。您不必在网站/应用程序中只使用一种类型。

大小和颜色

QIcon 的大小由 font-size CSS 属性控制。此外，QIcon 继承了当前使用的 CSS 文本 color。为了方便使用，有 QIcon size 和 color 属性。

对于不同 Quasar 组件上的 icon 属性，您无法为每个平台指定图标，但可以使用以下方法实现相同的效果

<q-btn
  :icon="$q.platform.is.ios ? 'settings' : 'ion-ios-gear-outline'"
/>

网络字体图标

网络字体用法

<q-icon name="..." />

命名约定

Material Icons (Google)

• 图标名称始终为蛇形命名法。
• 访问 Material Icons and Symbols，查找所需的图标。记住其名称（例如，“all_inbox”）并使用它。

MDI (Material Design Icons)

• 图标名称使用连字符分隔，并始终以“mdi-”前缀开头。
• 访问 MDI，查找所需的图标，点击它。将出现一个对话框。获取标题（例如，“account-key”），在前面加上“mdi-”即可得到结果（例如，“mdi-account-key”）。

Fontawesome

• 图标名称使用连字符分隔，并始终以“fas fa-”、“fab fa-”、“fal fa-”或“far fa-”前缀开头。
• 较新版本还具有 fa-solid、fa-brands、fa-light 或 fa-regular（pro 还具有 fa-thin、fa-duotone）
• 访问 FontAwesome，查找所需的图标，点击它。您将进入其页面。在图标名称（作为标题）下方，您将看到类似 <i class="fa-solid fa-flag"></i> 的内容。结果为 fa-solid fa-flag（您也可以使用 fas fa-flag）。
• 注意：fas、far、fab、fal、fat 和 fad 已弃用，可能在未来的主要版本中不可用。

Ionicons

• 图标名称使用连字符分隔，并始终以“ion-”、“ion-md-”、“ion-ios-”或“ion-logo-”前缀开头。
• 访问 Ionicons (v4)，查找所需的图标，然后点击它。在页面底部，将出现一个弹出窗口。注意类似 <ion-icon name="square-outline"></ion-icon> 的内容。记住名称（例如，“square-outline”）。根据您想要的变体（自动检测平台、material 或 iOS），您将获得结果：ion-square-outline 或 ion-md-square-outline 或 ion-ios-square-outline。
• 注意：从 v5 开始，Ionicons 不再提供 webfont。此外，它们也不再具有 Material 或 IOS 变体。

Eva Icons

• 图标名称使用连字符分隔，并始终以“eva-”前缀开头。
• 访问 Eva Icons，查找所需的图标，点击它。将出现一个对话框。从那里获取名称（例如，“attach-outline”），在前面加上“eva”，结果为“eva-attach-outline”。

Themify

• 图标名称使用连字符分隔，并始终以“ti-”前缀开头。
• 访问 Themify，查找所需的图标。记住其名称（例如，“ti-arrow-top-right”）并使用它。

Line Awesome

• 图标名称使用连字符分隔，并始终以“la”前缀开头。
• 访问 Line Awesome，查找所需的图标，点击它。将出现一个对话框。您将看到类似 <i class="lab la-behance-square"></i> 的内容。记住其名称（例如，“lab la-behance-square”）并使用它。

Bootstrap Icons

• 图标名称使用连字符分隔，并始终以“bi-”前缀开头。
• 访问 Bootstrap Icons，查找所需的图标。记住其名称（例如，“bi-bug-fill”）并使用它。

Svg 图标

在您的网站/应用程序中仅使用 svg 图标有很多优势

• 更好的应用程序占用空间 - 只有使用的图标将包含在最终构建中（tree-shaking 在起作用）
• 更高质量的图标
• 无需从 @quasar/extras 或 CDN 包含等效的 webfont。

目前的缺点是，使用这些图标比使用它们的 webfont 对应项更繁琐。

Svg 使用方法

在 <template> 中使用

<template>
  <div>
    <q-icon :name="matMenu" />
    <q-icon :name="fasFont" />
    <q-btn :icon="mdiAbTesting" />
  </div>
</template>

注意，我们使用 : 绑定变量，而不是使用普通值，这一点很重要。我们必须让这些变量可供模板使用。实现这一点的方法取决于您的 Vue API 偏好

带“script setup”的 Composition API

这是最方便的方法。只需导入变量即可让它们可供模板使用。

<script setup>
import { matMenu } from '@quasar/extras/material-icons'
import { mdiAbTesting } from '@quasar/extras/mdi-v6'
import { fasFont } from '@quasar/extras/fontawesome-v5'
</script>

不带“script setup”的 Composition API

<script>
import { matMenu } from '@quasar/extras/material-icons'
import { mdiAbTesting } from '@quasar/extras/mdi-v6'
import { fasFont } from '@quasar/extras/fontawesome-v5'

export default {
  // ...
  setup () {
    return {
      matMenu,
      mdiAbTesting,
      fasFont
    }
  }
}
</script>

Options API

注意，在下面的示例中，我们通过 created() 钩子注入图标，而不是从 data() 中返回它们。这是因为我们希望避免 Vue 使它们变得响应式。由于它们是静态值，使它们变得响应式会导致一些不必要的开销。如果我们在 data() 中声明它们，它仍然可以工作，但性能会更低。

<script>
import { matMenu } from '@quasar/extras/material-icons'
import { mdiAbTesting } from '@quasar/extras/mdi-v6'
import { fasFont } from '@quasar/extras/fontawesome-v5'

export default {
  // ...
  created () {
    this.matMenu = matMenu
    this.mdiAbTesting = mdiAbTesting
    this.fasFont = fasFont
  }
}
</script>

导入指南

Svg 图标由 @quasar/extras 提供（尽管您也可以提供 您自己的 svg 图标！）。以下是导入语法的来龙去脉

SVG Material Icons (Google)

• 图标名称使用驼峰命名法，并始终以“mat”前缀开头。
• 访问 Material Icons，查找所需的图标，并记住其名称（例如，“all_inbox”），在前面加上“mat”并将其转换为驼峰命名法（例如，“matAllInbox”）。
• 导入语句示例：import { matAllInbox } from '@quasar/extras/material-icons'。

SVG Material Icons Outlined (Google)

• 图标名称使用驼峰命名法，并始终以“outlined”前缀开头。
• 访问 Material Icons，查找所需的图标，并记住其名称（例如，“all_inbox”），在前面加上“outlined”并将其转换为驼峰命名法（例如，“outlinedAllInbox”）。
• 导入语句示例：import { outlinedAllInbox } from '@quasar/extras/material-icons-outlined'。

SVG Material Icons Sharp (Google)

• 图标名称使用驼峰命名法，并始终以“sharp”前缀开头。
• 访问 Material Icons，查找所需的图标，并记住其名称（例如，“all_inbox”），在前面加上“sharp”并将其转换为驼峰命名法（例如，“sharpAllInbox”）。
• 导入语句示例：import { sharpAllInbox } from '@quasar/extras/material-icons-sharp'。

SVG Material Icons Round (Google)

• 图标名称使用驼峰命名法，并始终以“round”前缀开头。
• 访问 Material Icons，查找所需的图标，并记住其名称（例如，“all_inbox”），在前面加上“round”并将其转换为驼峰命名法（例如，“roundAllInbox”）。
• 导入语句示例：import { roundAllInbox } from '@quasar/extras/material-icons-round'。

SVG Material Symbols Outlined (Google)

• 图标名称采用驼峰式命名法，并且始终以“symOutlined”前缀开头。
• 前往Material Icons，查找所需的图标并记住其名称（例如，“all_inbox”），在前面加上“symOutlined”前缀并将结果转换为驼峰式命名法（例如，“symOutlinedAllInbox”）。
• 导入语句示例：import { symOutlinedAllInbox } from '@quasar/extras/material-symbols-outlined'。

SVG Material Symbols Sharp（Google）

• 图标名称采用驼峰式命名法，并且始终以“symSharp”前缀开头。
• 前往Material Icons，查找所需的图标并记住其名称（例如，“all_inbox”），在前面加上“symSharp”前缀并将结果转换为驼峰式命名法（例如，“symSharpAllInbox”）。
• 导入语句示例：import { symSharpAllInbox } from '@quasar/extras/material-symbols-sharp'。

SVG Material Symbols Rounded（Google）

• 图标名称采用驼峰式命名法，并且始终以“symRounded”前缀开头。
• 前往Material Icons，查找所需的图标并记住其名称（例如，“all_inbox”），在前面加上“symRounded”前缀并将结果转换为驼峰式命名法（例如，“symRoundedAllInbox”）。
• 导入语句示例：import { symRoundedAllInbox } from '@quasar/extras/material-symbols-rounded'。

SVG MDI（Material Design Icons）

• 图标名称采用驼峰式命名法，并且始终以“mdi”前缀开头。
• 前往MDI，查找所需的图标并点击它。将出现一个对话框。获取标题（例如，“account-key”），在前面加上“mdi”前缀并将结果转换为驼峰式命名法（例如，“mdiAccountKey”）。
• 导入语句示例：import { mdiAccountKey } from '@quasar/extras/mdi-v6'。

SVG Fontawesome

• 图标名称采用驼峰式命名法，并且始终以“fas”、“fab”、“fal”或“far”前缀开头。
• 前往FontAwesome，查找所需的图标并点击它。您将进入其页面。在图标名称（作为标题）下方，您将看到类似于<i class="fas fa-flag"></i>的内容。这将转换为fasFlag。标签中的前缀很重要。
• 请注意，由于许可证原因，我们无法以 svg 格式提供“Pro”版本的图标。
• 导入语句示例：import { fasFlag } from '@quasar/extras/fontawesome-v6'。
• Quasar 的 SVG 表单仍在使用fas、far和fab，而不是更新的fa-solid、fa-regular和fa-brands。

SVG Ionicons

• Ionicons v4：图标名称采用驼峰式命名法，并且始终以“ionMd”或“ionIos”前缀开头。
• Ionicons v5/v6：图标名称采用驼峰式命名法，并且始终以“ion”前缀开头。
• Ionicons v4：前往Ionicons v4，查找所需的图标并点击它。页面底部将出现一个弹出窗口。注意类似于<ion-icon name="square-outline"></ion-icon>的内容。记住名称（例如，“square-outline”）。将此名称转换为驼峰式命名法并在前面加上“ionMd”（对于 Material 变体）或“ionIos”（对于 iOS 变体）前缀。
• Ionicons v5/v6：前往Ionicons v6，查找所需的图标并点击它。页面底部将出现一个弹出窗口。注意类似于<ion-icon name="square-outline"></ion-icon>的内容。记住名称（例如，“square-outline”）。在前面加上“ion”前缀并将结果转换为驼峰式命名法（例如，“ionSquareOutline”）。
• Ionicons v4：导入语句示例：import { ionMdSquareOutline } from '@quasar/extras/ionicons-v4'。
• Ionicons v5/v6：导入语句示例：import { ionSquareOutline } from '@quasar/extras/ionicons-v5'。

SVG Eva Icons

• 图标名称采用驼峰式命名法，并且始终以“eva”前缀开头。
• 前往Eva Icons，查找所需的图标并点击它。将出现一个对话框。从对话框中获取名称（例如，“attach-outline”），在前面加上“eva”前缀并将结果转换为驼峰式命名法（例如，“evaAttachOutline”）。
• 导入语句示例：import { evaAttachOutline } from '@quasar/extras/eva-icons'。

SVG Themify

• 图标名称采用驼峰式命名法，并且始终以“ti”前缀开头。
• 前往Themify，查找所需的图标。记住其名称（例如，“ti-arrow-top-right”），在前面加上“ti”前缀并将结果转换为驼峰式命名法（例如，“tiArrowTopRight”）。
• 导入语句示例：import { tiArrowTopRight } from '@quasar/extras/themify'。

SVG Line Awesome

• 图标名称采用驼峰式命名法，并且始终以“la”前缀开头。
• 前往Line Awesome，查找所需的图标并点击它。将出现一个对话框。您将看到类似于<i class="lab la-behance-square"></i>的内容。这将转换为：laBehanceSquare。不过，有一个特殊情况（仅限于实心图标）：如果“la-”之前的缀是“las”（例如，<i class="las la-atom"></i>），则需要在“la-atom”后面加上“-solid”并将结果转换为驼峰式命名法（例如，laAtomSolid）。
• 导入语句示例：import { laBehanceSquare } from '@quasar/extras/line-awesome'。

SVG Bootstrap Icons

• 图标名称采用驼峰式命名法，并且始终以“bi”前缀开头。
• 前往Bootstrap Icons，查找所需的图标。记住其名称（例如，“bi-bug-fill”），并将结果转换为驼峰式命名法（例如，“biBugFill”）。
• 导入语句示例：import { biBugFill } from '@quasar/extras/bootstrap-icons'。

Svg 图标格式

您也可以提供自己的 svg 图标。svg 图标本质上是一个字符串，具有以下语法

Syntax: "<path>&&<path>&&...|<viewBox>"
           P       P             V
                (optional)   (optional)
                             (default: 0 0 24 24)

P is a path tag with following syntax (each are attributes):
        "<d>@@<style>@@<transform>"
        (required)
            (optional)
                     (optional)

示例

// Simplest ("<path>"):
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z

// equivalent to:
<svg viewBox="0 0 24 24">
  <path d="M9 3L5 6.99h3V....."/>
</svg>

// Simplest with custom viewBox ("<path>|<viewBox>"):
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 104 104

// equivalent to:
<svg viewBox="0 0 104 104">
  <path d="M9 3L5 6.99h3V....."/>
</svg>

// Path with custom style ("<path>@@<style>|<viewBox>"):
  M48,96L464,96 464,416 48,416z@@fill:none;stroke:currentColor.....|0 0 512 512

// equivalent to:
<svg viewBox="0 0 512 512">
  <path d="M416,480,256,357....." style="fill:none;stroke:curren..." />
</svg>

// Path with custom style and transform ("<path>@@<style>@@transform"):
  M9 3L5 6.99h3V...@@fill:none;stroke:cu.....@@translate(10 1) rotate(180)

// equivalent to:
<svg viewBox="0 0 24 24">
  <path
    d="M9 3L5 6.99h3V....."
    style="fill:none;stroke:curren..."
    transform="translate(10 1) rotate(180)"
  />
</svg>

// Path with custom transform ("<path>@@@@transform"):
// (Notice style separator is still specified)

  M9 3L5 6.99h3V...@@@@translate(2 4) rotate(180)

// equivalent to:
<svg viewBox="0 0 24 24">
  <path
    d="M9 3L5 6.99h3V....."
    transform="translate(2 4) rotate(180)"
  />
</svg>

// Multi-paths -- any number of paths are possible ("<path>&&<path>|<viewBox>"):
  M416,480,256,357.41,96,480V32H416Z&&M368,64L144 256 368 448 368 64z|0 0 512 512

// equivalent to:
<svg viewBox="0 0 512 512">
  <path d="M416,480,256,357....." />
  <path d="M368,64L144 256 368...." />
</svg>

// Multi-paths, each with style and transform ("<path>&&<path>|<viewBox>"):
  M9 3L5 6.99h3V...@@stroke-width:5px@@rotate(45)&&M416,480,256,...@@stroke-width:2px@@rotate(15)&&M368,64L144 2...@@stroke-width:12px@@rotate(5)|0 0 512 512

// equivalent to:
<svg viewBox="0 0 512 512">
  <path
    d="M9 3L5 6.99h3V....."
    style="stroke-width:5px"
    transform="rotate(45)"
  />
  <path
    d="M416,480,256,..."
    style="stroke-width:2px"
    transform="rotate(15)"
  />
  <path
    d="M368,64L144 2..."
    style="stroke-width:12px"
    transform="rotate(5)"
  />
</svg>

SVG-use 方式

这种 svg 方法允许您将 SVG 文件存储为静态资产并引用它们。

// File: /public/icons.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-1" viewBox="0 0 24 24">
    <path d="..."></path>
  </symbol>
  <symbol id="icon-2" viewBox="0 0 24 24">
     <path d="..."></path>
  </symbol>
</svg>

标准的 HTML 方式是包含文件并使用svg use标签指定图标。

<svg>
  <use xlink:href="icons.svg#icon-1"></use>
</svg>

要通过 QIcon 在 Quasar 中使用它（确保您正在从公共文件夹中引用正确的文件）

<q-icon name="svguse:icons.svg#icon-1">
<!-- or -->
<q-btn-dropdown label="Custom Content" dropdown-icon="svguse:icons.svg#icon-2" />

默认情况下，父 svg 的 viewBox 为“0 0 24 24”。但是，您也可以指定自定义的 viewBox

<q-icon name="svguse:icons.svg#icon-1|10 15 40 40" />

内联 svg

如果您不想使用上面的 webfont 或 svg 变体，请注意，QIcon 还支持一个内联的<svg>标签（svg 的内容可以是任何内容，不仅仅是路径）。

在 QIcon 中使用<svg>的原因是，svg 将通过其 props 尊重 QIcon 的大小和颜色。如果没有这些功能，您最好直接将 svg 内联到您的模板中，而不使用 QIcon 进行包装。

<q-icon color="accent" size="5rem">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"/>
  </svg>
</q-icon>

一些限制

• 不要在<svg>标签上使用“height”/“width”属性（它会破坏 QIcon 处理大小的方式）
• 所有<path>默认情况下将应用“fill: currentColor” CSS；如果您不希望这样，请在<path>标签中添加fill="none"

图像图标

您也可以使图标指向图像 URL，而不是依赖于任何 webfont，方法是使用img:前缀。

Quasar 组件的所有与图标相关的 props 都可以使用它。

<q-icon name="img:https://cdn.quasar.dev/logo-v2/svg/logo.svg" />
<q-btn icon="img:https://cdn.quasar.dev/logo-v2/svg/logo.svg" ... />

<!-- reference from /public: -->
<q-icon name="img:my/path/to/some.svg" />

这并不限于 SVG。您可以使用任何您想要的图像类型（png、jpg、…）

<q-icon name="img:bla/bla/my.png" />
<q-btn icon="img:bla/bla/my.jpg" ... />
<q-input clearable clear-icon="img:bla/bla/my.gif" ... />

还可以内联图像（svg、png、jpeg、gif……）并动态更改其样式（svg）

<q-icon name="img:data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' height='140' width='500'><ellipse cx='200' cy='80' rx='100' ry='50' style='fill:yellow;stroke:purple;stroke-width:2' /></svg>" />

您还可以对图像进行 base64 编码并提供它。下面的示例是使用 QBtn，但处理任何图标 props 或 QIcon 时都涉及相同的原理

<q-btn icon="
img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" ... />

自定义映射

如果您愿意，您可以自定义图标名称的映射。这可以通过提供自定义的图标映射函数来完成。有多种方法可以提供一个映射函数

• 在入口文件中设置IconSet.iconMapFn
  • 如果使用 Quasar CLI（使用 Vite 或 Webpack），则在引导文件中设置
  • 如果使用 Vite 插件和 Vue CLI，则在main.js/main.ts（或类似文件）中设置
  • 如果使用 UMD，则在任何合适的 文件或脚本标签中设置
• 在根组件（例如App.vue）中设置$q.iconMapFn
  • 如果使用 Composition API 与<script setup>，则在顶级设置
  • 如果使用 Composition API，则在setup()函数中设置
  • 如果使用 Options API，则在created()钩子中设置
• 在 Quasar Vue 插件选项中设置iconMapFn，例如app.use(Quasar, { iconMapFn: () => { /* ... */ } })（对于 Quasar CLI 以外的风味）。

我们将使用$q.iconMapFn方法使用<script setup>来演示下面的用例示例，但相同的原理也适用于其他方法。

iconMapFn的结构如下

type GlobalQuasarIconMapFn = (
  iconName: string
) =>
  // Map to another existing icon
  {
    icon: string  // the mapped icon string, which will be handled
                  // by Quasar as if the original QIcon name was this value
  } |
  // Define how to interpret the icon
  {
    cls: string;     // class name(s)
    content?: string // optional, in case you are using a ligature font
                     // and you need it as content of the QIcon
  } |
  // Leave it as is, default Quasar handling
  void;

映射图标不仅会影响 QIcon，还会影响使用图标的任何其他 Quasar 组件，如 QBtn、QInput 等。

用例 1：简单地映射几个图标

import { useQuasar } from 'quasar'

const myIcons = {
  'app:icon1': 'img:/path/to/icon1.svg',
  'app:icon2': 'img:/path/to/icon2.svg',
  'app:copy': 'fas fa-copy',
}

// ...
const $q = useQuasar()

$q.iconMapFn = (iconName) => {
  const icon = myIcons[iconName]
  if (icon !== undefined) {
    return { icon }
  }
}

现在我们可以使用<q-icon name="app:copy" />或<q-icon name="app:icon1" />，QIcon 将像使用“fas fa-copy”和“img:/path/to/icon1.svg”一样对待“app:copy”和“app:icon1”。这同样适用于使用图标的任何其他 Quasar 组件，例如<q-btn icon="app:copy" />。

用例 2：支持自定义图标库

当您使用自定义图标库（不包含在 Quasar 及其 @quasar/extras 包中）时，这一点特别有用。

import { useQuasar } from 'quasar'

const $q = useQuasar()

// Example of adding support for `<q-icon name="app:...." />`
// This includes support for all "icon" props of Quasar components

$q.iconMapFn = (iconName) => {
  // iconName is the content of QIcon "name" prop (or related icon prop of other Quasar components)

  // can be any logic you want, but for this example:
  if (iconName.startsWith('app:') === true) {
    // we strip the "app:" part
    const name = iconName.substring(4)

    return {
      cls: 'my-app-icon ' + name
    }
  }

  // when we don't return anything from our iconMapFn,
  // the default Quasar icon mapping takes over
}

请注意，在上面的示例中，我们返回了一个 my-app-icon 类，该类如果我们的图标以 app: 前缀开头，就会应用于 QIcon。我们可以用它来定义 QIcon 应该如何从 CSS 角度对其做出反应。

假设我们拥有自己的名为“My App Icon”的 Web 字体。

/*
  For this example, we are creating:
  /src/css/my-app-icon.css
*/

.my-app-icon {
  font-family: 'My App Icon';
  font-weight: 400;
}

@font-face {
  font-family: 'My App Icon';
  font-style: normal; /* whatever is required for your */
  font-weight: 400;   /* webfont.... */
  src: url("./my-app-icon.woff2") format("woff2"), url("./my-app-icon.woff") format("woff");
}

然后，我们应该将新创建的 CSS 文件添加到我们的应用程序中。

• Quasar CLI：将其添加到 quasar.config 文件中的 css 数组中。

  // quasar.config file
  css: [
    // ....
    'my-app-icon.css'
  ]

  content_paste

  已复制到剪贴板

• 其他：将其添加到您的 CSS 文件中，在 main.js/main.ts 中导入它，或者将其包含在您的 HTML 文件中。

  // in your main.js/main.ts
  import 'src/css/my-app-icon.css'
  
  // or in the main css file
  @import url('./my-app-icon.css');
  
  // or in your HTML file (UMD)
  <link rel="stylesheet" href="/css/my-app-icon.css">

  content_paste

  已复制到剪贴板

并将 “my-app-icon.woff2” 和 “my-app-icon.woff” 文件添加到与 “my-app-icon.css” 相同的文件夹中（或其他地方，但编辑 woff/woff2 文件的相对路径（参见上面的 “src:”））。