The QIcon component allows you to easily insert icons within other components or any other area of your pages. Quasar supports out of the box: Material Icons , Material Symbols , Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons, Line Awesome and Bootstrap Icons.

Furthermore you can add support by yourself for any icon lib.

在 Quasar 中有多種圖示類型：基於 webfont、基於 SVG 和基於圖片。您不一定只能在您的網站/應用程式中使用一種類型。

尺寸 & 顏色

QIcon 的尺寸大小由 font-size CSS 屬性控制。此外，QIcon 會繼承目前使用的 CSS 文字 color。為了方便使用，QIcon 提供了 size 和 color props。

對於不同 Quasar 元件上的 icon 屬性，您將無法為每個平台指定圖示，但您可以使用以下方法達到相同的效果

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

Webfont 圖示

Webfont 用法

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

命名慣例

Material Icons (Google)

• 圖示名稱一律為 snake_case。
• 前往 Material Icons 和 Symbols，尋找您想要的圖示。記住它的名稱（例如 “all_inbox”）並使用它。

MDI (Material Design Icons)

• 圖示名稱為 hyphen-separated case 且一律以 “mdi-” 前綴開頭。
• 前往 MDI，尋找您想要的圖示，點擊它。將會出現一個對話方塊。取得標題（例如 “account-key”），加上 “mdi-” 前綴，您將得到結果（例如 “mdi-account-key”）。

Fontawesome

• 圖示名稱為 hyphen-serapated case 且一律以 “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

• 圖示名稱為 hyphen-separated case 且一律以 “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

• 圖示名稱為 hyphen-separated case 且一律以 “eva-” 前綴開頭。
• 前往 Eva Icons，尋找您想要的圖示，點擊它。將會出現一個對話方塊。從那裡取得名稱（例如 “attach-outline”），加上 “eva” 前綴，結果為 “eva-attach-outline”。

Themify

• 圖示名稱為 hyphen-separated case 且一律以 “ti-” 前綴開頭。
• 前往 Themify，尋找您想要的圖示。記住它的名稱（例如 “ti-arrow-top-right”）並使用它。

Line Awesome

• 圖示名稱為 hyphen-separated case 且一律以 “la” 前綴開頭。
• 前往 Line Awesome，尋找您想要的圖示，點擊它。將會出現一個對話方塊。您會看到類似 <i class="lab la-behance-square"></i> 的內容。記住它的名稱（例如 “lab la-behance-square”）並使用它。

Bootstrap Icons

• 圖示名稱為 hyphen-separated case 且一律以 “bi-” 前綴開頭。
• 前往 Bootstrap Icons，尋找您想要的圖示。記住它的名稱（例如 “bi-bug-fill”）並使用它。

Svg 圖示

在您的網站/應用程式中僅使用 svg 圖示有很多優點

• 更好的應用程式佔用空間 – 最終建置中只會包含使用的圖示（treeshaking 運作中）
• 更好的圖示品質
• 無需從 @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() hook 注入圖示，而不是從 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)

• 圖示名稱為 camel-case 且一律以 “mat” 前綴開頭。
• 前往 Material Icons，尋找您想要的圖示並記住它的名稱（例如 “all_inbox”），加上 “mat” 前綴並將結果轉換為 camel-case（例如 “matAllInbox”）。
• 匯入語句範例：import { matAllInbox } from '@quasar/extras/material-icons'。

SVG Material Icons Outlined (Google)

• 圖示名稱為 camel-case 且一律以 “outlined” 前綴開頭。
• 前往 Material Icons，尋找您想要的圖示並記住它的名稱（例如 “all_inbox”），加上 “outlined” 前綴並將結果轉換為 camel-case（例如 “outlinedAllInbox”）。
• 匯入語句範例：import { outlinedAllInbox } from '@quasar/extras/material-icons-outlined'。

SVG Material Icons Sharp (Google)

• 圖示名稱為 camel-case 且一律以 “sharp” 前綴開頭。
• 前往 Material Icons，尋找您想要的圖示並記住它的名稱（例如 “all_inbox”），加上 “sharp” 前綴並將結果轉換為 camel-case（例如 “sharpAllInbox”）。
• 匯入語句範例：import { sharpAllInbox } from '@quasar/extras/material-icons-sharp'。

SVG Material Icons Round (Google)

• 圖示名稱為 camel-case 且一律以 “round” 前綴開頭。
• 前往 Material Icons，尋找您想要的圖示並記住它的名稱（例如 “all_inbox”），加上 “round” 前綴並將結果轉換為 camel-case（例如 “roundAllInbox”）。
• 匯入語句範例：import { roundAllInbox } from '@quasar/extras/material-icons-round'。

SVG Material Symbols Outlined (Google)

• 圖示名稱為 camel-case 且一律以 “symOutlined” 前綴開頭。
• 前往 Material Icons，尋找您想要的圖示並記住它的名稱（例如 “all_inbox”），加上 “symOutlined” 前綴並將結果轉換為 camel-case（例如 “symOutlinedAllInbox”）。
• 匯入語句範例：import { symOutlinedAllInbox } from '@quasar/extras/material-symbols-outlined'。

SVG Material Symbols Sharp (Google)

• 圖示名稱為 camel-case 且一律以 “symSharp” 前綴開頭。
• 前往 Material Icons，尋找您想要的圖示並記住它的名稱（例如 “all_inbox”），加上 “symSharp” 前綴並將結果轉換為 camel-case（例如 “symSharpAllInbox”）。
• 匯入語句範例：import { symSharpAllInbox } from '@quasar/extras/material-symbols-sharp'。

SVG Material Symbols Rounded (Google)

• 圖示名稱為 camel-case 且一律以 “symRounded” 前綴開頭。
• 前往 Material Icons，尋找您想要的圖示並記住它的名稱（例如 “all_inbox”），加上 “symRounded” 前綴並將結果轉換為 camel-case（例如 “symRoundedAllInbox”）。
• 匯入語句範例：import { symRoundedAllInbox } from '@quasar/extras/material-symbols-rounded'。

SVG MDI (Material Design Icons)

• 圖示名稱為 camel-case 且一律以 “mdi” 前綴開頭。
• 前往 MDI，尋找您想要的圖示，點擊它。將會出現一個對話方塊。取得標題（例如 “account-key”），加上 “mdi” 前綴並將結果轉換為 camel-case（例如 “mdiAccountKey”）。
• 匯入語句範例：import { mdiAccountKey } from '@quasar/extras/mdi-v6'。

SVG Fontawesome

• 圖示名稱為 camel-case 且一律以 “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：圖示名稱為 camel-case 且一律以 “ionMd” 或 “ionIos” 前綴開頭。
• Ionicons v5/v6：圖示名稱為 camel-case 且一律以 “ion” 前綴開頭。
• Ionicons v4：前往 Ionicons v4，尋找您想要的圖示，點擊它。在頁面底部將出現一個彈出視窗。請注意類似 <ion-icon name="square-outline"></ion-icon> 的內容。記住名稱（例如 “square-outline”）。將此名稱轉換為 camel-case，並加上 “ionMd”（對於 material 變體）或 “ionIos”（對於 iOS 變體）前綴。
• Ionicons v5/v6：前往 Ionicons v6，尋找您想要的圖示，點擊它。在頁面底部將出現一個彈出視窗。請注意類似 <ion-icon name="square-outline"></ion-icon> 的內容。記住名稱（例如 “square-outline”）。加上 “ion” 前綴並將結果轉換為 camel-case（例如 “ionSquareOutline”）。
• Ionicons v4：匯入語句範例：import { ionMdSquareOutline } from '@quasar/extras/ionicons-v4'。
• Ionicons v5/v6：匯入語句範例：import { ionSquareOutline } from '@quasar/extras/ionicons-v5'。

SVG Eva Icons

• 圖示名稱為 camel-case 且一律以 “eva” 前綴開頭。
• 前往 Eva Icons，尋找您想要的圖示，點擊它。將會出現一個對話方塊。從那裡取得名稱（例如 “attach-outline”），加上 “eva” 前綴並將結果轉換為 camel-case（例如 “evaAttachOutline”）。
• 匯入語句範例：import { evaAttachOutline } from '@quasar/extras/eva-icons'。

SVG Themify

• 圖示名稱為 camel-case 且一律以 “ti” 前綴開頭。
• 前往 Themify，尋找您想要的圖示。記住它的名稱（例如 “ti-arrow-top-right”），加上 “ti” 前綴並將結果轉換為 camel-case（例如 “tiArrowTopRight”）。
• 匯入語句範例：import { tiArrowTopRight } from '@quasar/extras/themify'。

SVG Line Awesome

• 圖示名稱為 camel-case 且一律以 “la” 前綴開頭。
• 前往 Line Awesome，尋找您想要的圖示，點擊它。將會出現一個對話方塊。您會看到類似 <i class="lab la-behance-square"></i> 的內容。這將轉換為：laBehanceSquare。但有一個特殊情況（僅適用於實心圖示！）：如果 “la-” 前綴之前的前綴是 “las”（例如 <i class="las la-atom"></i>），那麼您需要在 “la-atom” 後面加上 “-solid” 並將結果轉換為 camel-case（例如 laAtomSolid）。
• 匯入語句範例：import { laBehanceSquare } from '@quasar/extras/line-awesome'。

SVG Bootstrap Icons

• 圖示名稱為 camel-case 且一律以 “bi” 前綴開頭。
• 前往 Bootstrap Icons，尋找您想要的圖示。記住它的名稱（例如 “bi-bug-fill”），將結果轉換為 camel-case（例如 “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>

要將此方法與 Quasar 透過 QIcon 一起使用（確保您從 public 資料夾引用正確的檔案）

<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；如果您不想要這樣，請將 fill="none" 新增至 <path> 標籤

圖片圖示

您也可以使用 img: 前綴，使圖示指向圖片 URL，而不是依賴任何 webfont。

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，但當處理任何圖示 prop 或 QIcon 時，也涉及相同的原理

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

自訂對應

如果您願意，您可以自訂圖示名稱的對應。這可以透過提供自訂圖示對應函數來完成。有多種方法可以提供一個

• 在條目檔案中設定 IconSet.iconMapFn
  • 如果使用 Quasar CLI（使用 Vite 或 Webpack），則在 boot 檔案中
  • 如果使用 Vite 外掛程式和 Vue CLI，則在 main.js/main.ts（或類似檔案）中
  • 如果使用 UMD，則在任何合適的檔案或 script 標籤中
• 在根元件中設定 $q.iconMapFn，例如 App.vue
  • 如果使用帶有 <script setup> 的 Composition API，則在頂層
  • 如果使用 Composition API，則在 setup() 函數中
  • 如果使用 Options API，則在 created() hook 中
• 在 Quasar Vue 外掛程式選項中設定 iconMapFn，例如 app.use(Quasar, { iconMapFn: () => { /* ... */ } })（對於 Quasar CLI 以外的風味）。

在以下的使用案例範例中，我們將使用使用 <script setup> 的 $q.iconMapFn 方法，但相同的原理適用於其他方法。

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 會將 “app:copy” 和 “app:icon1” 視為它們被寫成 “fas fa-copy” 和 “img:/path/to/icon1.svg” 一樣。這同樣適用於任何其他使用圖示的 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
}

請注意在上面的範例中，如果我們的圖示以 app: 前綴開頭，我們會返回一個 my-app-icon 類別，該類別會應用於 QIcon。我們可以從 CSS 觀點使用它來定義 QIcon 應該如何對其做出反應。

假設我們有自己的 webfont 稱為 “My App Icon”。

/*
  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:”））。