欢迎 Web Awesome，这是最大最好的开源 Web 组件库。

对象

以下是我们的 GraphQL API 支持的对象。

帐户

一个 Font Awesome 帐户。

字段	描述	Auth
id (`Integer`)	帐户 ID。	profile_read
email (`String`)	帐户电子邮件地址。	profile_read
proCdnReferrers (ProCdnReferrers)	与该帐户关联的已为 Pro CDN 使用而列入白名单的域的集合。	domains_read
kits (Kits)	该帐户上的所有套件。	kits_read
kit (Kit)	该帐户上的套件，由 `token` 指定。	kits_read

对于 kit 字段

参数	类型	描述
`token`	`String!`	必填。套件令牌，例如“47997b2a2a”

下载

有关版本下载资产的信息。

字段	描述
separatesWebDesktop (`Boolean`)	该版本是否具有针对 Web 和桌面用例的单独下载资产。

IconCount

字段	描述
free (`Integer!`)	该版本中免费图标的数量。
pro (`Integer!`)	该版本中 Pro 图标的数量。

IconUpload

已上传到 kit 的图标。

“图标上传”有时也称为“自定义图标”。它们是客户可以上传到他们自己的套件并像使用任何 Font Awesome 官方图标一样使用的图标。

字段	描述
name (`String`)	图标的名称，由拥有该套件的客户指定。
unicode (`Integer`)	Unicode 的值，作为整数。这是在客户创建图标上传时由系统生成的。它在一个给定套件中是唯一的，但两个不同的套件可能使用相同的 Unicode 针对不同的图标。
version (`Integer`)	该图标上传的序列版本号。如果客户更改图标的路径数据，例如，版本号将更改。此 API 仅提供最新版本。
width (`String`)	宽度，将用作 `<svg>` 元素的 `viewBox` 属性的第三个参数。（上面的示例）
height (`String`)	高度，将用作 `<svg>` 元素的 `viewBox` 属性的第三个参数。（上面的示例）
pathData (`[String!]!`)	图标的 SVG 路径数据。有关 Svg 类型上的等效 `pathData` 字段的详细信息，请参见详细信息。
html (`String!`)	SVG 作为 `<svg>` html 元素。
iconDefinition (`Json!`)	SVG 格式化为 IconDefinition，可在 Font Awesome JavaScript API 中使用。
~~path (`String!`)~~	已弃用。请改用 `pathData` 字段，它包含单色和双色调图标的主路径和次路径。 `path` 字段仅是主路径，对于双色调图标来说是不够的。

一个 <i> 元素

name 可以用于使用 Font Awesome CSS 类名构建 <i> 。

您还需要一个 CSS 类来指定图标的 familyStyle。

单色图标上传的 familyStyle 类始终是 fak 或 fa-kit 。

双色调图标上传的 familyStyle 类始终是 fakd 或 fa-kit-duotone 。

如果 pathData.length == 2 ，则它是双色调，否则是单色。

<i class="fa-kit fa-some-monotone-icon-name"></i>
<i class="fa-kit-duotone fa-some-duotone-icon-name"></i>

这两个都可以添加到已加载 Web 字体/CSS 或 SVG/JS 套件的 DOM 中。

CSS 伪元素

使用 unicode ，可以使用 CSS 伪元素引用图标

HTML

<ul class="fancy-list">
  <li class="alpha">Chocolate</li>
  <li class="beta">Vanilla</li>
</ul>

假设您想对 .alpha 使用一些单色图标上传，并对 .beta 使用一些双色调图标。

CSS

.fancy-list {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0;
}
.fancy-list .alpha:before {
  content: '\e001';
  font-family: 'Font Awesome Kit';
  margin-right: 0.25em;
}
.fancy-list .beta:before {
  content: '\e002';
  font-family: 'Font Awesome Kit Duotone';
  margin-right: 0.25em;
}

（将 e001 或 e002 替换为 unicode 值作为十六进制字符串：例如 unicode.toString(16) 。）

请注意，单色图标上传的 font-family 始终是“Font Awesome Kit”；双色调图标上传的 font-family 始终是“Font Awesome Kit Duotone”。

图标

一个特定的 Font Awesome 图标。

字段	描述
id (`String!`)	图标的标识名称，例如 pizza-slice 或 bicycle 。
changes (`[String!]!`)	更改该图标的 Font Awesome 版本列表。
label (`String!`)	通常，该图标更具可读性的表示。例如， `id` 为“coffee-pot”的图标的 `label` 为“咖啡壶”。
unicode (`String!`)	可以通过该 Unicode 标识该图标——仅作为字符串的十六进制数字。例如，咖啡图标的此字段的值为“f0f4”。
shim (`Shim`)	Font Awesome 4 和 Font Awesome 5/6 之间对该图标的重命名或样式更改。
familyStylesByLicense (`FamilyStylesByLicense!`)	一个对象，按许可证类型（免费和专业）描述该图标的系列和样式。
svgs ([`Svg!`])	该图标的 SVG。
aliases (`Aliases`)	该图标的别名。
~~styles (`[String!]!`)~~	已弃用。请改用 `familyStylesByLicense` 字段。该图标的 Font Awesome 样式列表，即“solid”、“regular”、“light”、“thin”、“duotone”或“brands”。注意：此对象不包括我们新的 Sharp 系列的 solid 样式。
~~membership (`Membership!`)~~	已弃用。请改用 `familyStylesByLicense` 字段。一个对象，按许可证类型（免费和专业）描述该图标的样式。注意：此对象不包括我们新的 Sharp 系列的 solid 样式。

对于 svgs 字段

参数	类型	描述
`filter`	`SvgsFilter`	可选。默认情况下，将包含请求中使用的身份验证令牌上的范围允许的所有可用 SVG。

授权范围和 `svgs` 字段

用于查询请求的身份验证令牌会根据其授权范围授权选择给定的 familyStyle。

例如，Classic Light familyStyle 仅在身份验证令牌包含 svg_icons_pro 范围时可用。如果身份验证令牌仅包含 svg_icons_free 范围，则 Classic Light 图标将不会由该字段返回，无论 filter 参数如何。Font Awesome Free SVG 需要包含 svg_icons_free 范围的身份验证令牌。

通过过滤 SVG familyStyles 来降低查询复杂度

使用默认的 all familyStyles 选择 svgs 字段通常会导致查询 过于复杂。尤其是在为 release 下的所有 icons 选择 svgs 时。了解更多关于管理复杂性的信息。

以下是一个使用 filter 仅包含 Sharp Light 和 Duotone Solid familyStyles 的查询示例

query {
  release(version: "6.x") {
    icons {
      id
      svgs(
        filter: {
          familyStyles: [
            { family: SHARP, style: LIGHT }
            { family: DUOTONE, style: SOLID }
          ]
        }
      ) {
        width
        height
        pathData
      }
    }
  }
}

此处 family 和 style 的值是大写的，因为它们是枚举变体。只有有效值可用作变体。请参阅下面关于 Family 和 Style 类型的说明。

SvgsFilter

一个声明在 svgs 过滤器中包含哪些 familyStyles 的对象。

字段	描述
familyStyles (`FamilyStyleFilter!`)	一个包含 `family` 和 `style` 键的对象列表。每个对象都声明一个要在过滤器中包含的 familyStyle。

FamilyStyleFilter

一个声明一个要在 svgs 过滤器中包含的 familyStyle 的对象。

字段	描述
family (`Family!`)	一个 family。
style (`Style!`)	一个 style。

系列

一个包含与 Font Awesome 官方 family 相对应的变体的枚举。

这些是在 SvgsFilter 中 family 允许的唯一值。

CLASSIC
DUOTONE
SHARP

样式

一个包含与 Font Awesome 官方 style 相对应的变体的枚举。

这些是在 SvgsFilter 中 style 允许的唯一值。

BRANDS
DUOTONE
LIGHT
REGULAR
SOLID
THIN

Svg

特定 Font Awesome 图标的 SVG 数据，在一个 familyStyle 中。

各种独立字段可用于构造 <svg> HTML 元素或用于 Font Awesome JavaScript API 的 IconDefinition。或者，html 字段提供一个完整的 <svg> HTML 元素，iconDefinition 字段提供一个完整的 JSON 对象，该对象可以用作 JavaScript API 中的 IconDefinition。

字段	描述
familyStyle (`FamilyStyle!`)	SVG 的 familyStyle。
height (`Int!`)	SVG viewBox 的高度。
width (`Int!`)	SVG viewBox 的宽度。
html (`String!`)	格式为 html `<svg>` 元素的 svg。
iconDefinition (`Json!`)	SVG 格式化为 IconDefinition，可在 Font Awesome JavaScript API 中使用。
pathData (`[String!]!`)	每个项目都是 svg `<path>` 元素中 `d` 属性的值。单色图标只有一个路径，即主路径。双色调图标始终有两条路径。当为双色调时，第一个列表元素对应于图标的次要路径，第二个列表元素对应于图标的主路径。注意！这可能看起来违反直觉：第一个路径（在列表索引 0 处）是双色调图标的次要层。任一路径都可能为空字符串，表示该层没有路径。一些双色调图标只有一个主路径，而其他双色调图标只有一个次要路径。

构建 `IconDefinition`

您可能需要一个用于 JavaScript API 或 IconDefinition，例如 React 组件。您可以通过简单地选择 iconDefinition 字段来获取它。或者，您可以从组件部分构建一个。

// For a monotone icon, the path used in an IconDefinition is just a string.
// For a duotone icon, it's a list, with the secondary path appearing first.
// The pathData field selected from the GraphQL API is always a list.

const path = pathData.length == 1 ? pathData[0] : pathData

// If using `width` and `height` from an `IconUpload`, those types are `String`
// and must be parsed as numbers when using in an `IconDefinition`.
// The svgs field returns integers for width and height.
// This is one way to ensure they are parsed as numbers, in some context where
// you might get properties for either.

const widthInt = +width
const heightInt = +height

// The unicode in an IconDefinition is always the hexadecimal string representation.
const unicodeHex = unicode.toString(16)

const someIconDefinition = {
  "prefix": `${prefix}`,
  "iconName": `${name}`,
  "icon": [
    widthInt,
    heightInt,
    [], // no ligatures
    unicodeHex,
    path
  ]
}

// React component
<FontAwesomeIcon icon={ someIconDefinition }/>

或一个抽象

import { icon } from '@fortawesome/fontawesome-svg-core'

icon(someIconDefinition).abstract

构建 SVG 元素

您可能需要一个用于 SVG 的 <svg> 元素。您可以通过选择 html 字段来获取它。这是所有 Font Awesome SVG 使用的标准格式，包括双色调 SVG 所需的任何样式。

或者，您可以从组件部分构建 <svg> 元素，如下例所示。

请注意，单色和双色调 SVG 的构建方式截然不同。您可以通过 pathData 检测它是单色还是双色调 SVG。当 pathData 具有 length == 1 时，该元素是单色 SVG 的主路径。当它具有 length == 2 时，这些元素是 [secondary, primary]。次要路径始终先写。

const isDuotone = pathData.length == 2

const svg = isDuotone
  ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
        <defs><style>.fa-secondary{opacity:.4}</defs></style>
        <path class="fa-secondary" d="${pathData[0]}"/>
        <path class="fa-primary" d="${pathData[1]}"/>
    </svg>`
  : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
        <path d="${pathData[0]}"/>
    </svg>`

要使 SVG 与 Font Awesome 的支持样式一起使用，请添加 class="svg-inline--fa" 并加载 svg-with-js.css 样式表。

套件

关于 Font Awesome Kit 的元数据。

字段	描述	Auth
name (`String!`)	用户可分配的 Kit 名称，例如昵称。创建 Kit 时，其初始名称只是令牌。
token (`ID!`)	令牌标识此 Kit 并用于 Kit 嵌入代码的 URL 中。
status (`String!`)	值为“published”表示该 Kit 处于活动状态且可用。
licenseSelected (`String!`)	“free”或“pro”，表示此 Kit 是否能够加载 Pro 图标，或者仅加载 Free 图标，以及如何加载它们，因为 Pro Kit 使用了一些额外的加载优化。
technologySelected (`String!`)	“webfonts”或“svg”。
version (`String!`)	此 Kit 加载的 Font Awesome 版本。可以是语义版本，例如“6.1.2”，也可以是符号版本范围之一，例如“5.x”或“6.x”。5.x 表示最新的版本 5；6.x. 表示最新的版本 6。如果它是一个符号版本范围，则可以通过查询 Kit 的 `release.version` 字段将其解析为当前语义版本。
minified (`Boolean!`)	此 Kit 是否加载最小化资产。
domains (`[String!]!`)	域列表，可能涉及通配符，这些域是加载此 Kit 的有效源域。	domains_read
autoAccessibilityEnabled (`Boolean!`)	此 Kit 是否启用了自动辅助功能。
shimEnabled (`Boolean!`)	此 Kit 是否启用了 Font Awesome 4 兼容性。
iconUploads (`[IconUpload]`)	此 Kit 上的 IconUpload 对象列表。
release (`Release!`)	此 Kit 版本设置为的 Font Awesome 版本。如果 version 字段设置为符号版本范围（例如“5.x”或“6.x”），则此版本将设置为特定的最新版本。

会员资格 (已弃用)

从 Font Awesome 6.2.0 开始，使用类型为 FamilyStylesByLicense 的 familyStylesByLicense 字段，该字段支持 family，包括 Sharp family。

此类型的对象仅包含旧式 style 名称。例如，它们从不包含“Sharp Solid”的 family/style 组合。

指示每个许可证类型，此图标出现在哪些旧式 style 中。

字段	描述
free (`[String!]!`)	一个包含此图标在 Font Awesome Free 中出现的（旧式）style 列表。Free 图标通常仅出现在“solid”style 中。一些图标也出现在“regular”style 中，以便与 Font Awesome 4 更接近地视觉等效。对于根本未出现在 Font Awesome Free 中的图标，例如 alicorn，这将是一个空列表。
pro (`[String!]!`)	一个包含此图标在 Font Awesome Pro 中出现的（旧式）style 列表。Pro 图标通常出现在所有可用 style 中。

FamilyStyle

family 和 style 的组合。

从 Font Awesome 6.2.0 开始，每个 style 都属于一个 family。最初的旧式 Font Awesome style - Solid、Regular、Light 和 Thin - 属于 Classic family。

字段	描述
family (`String!`)	family 名称，例如“classic”、“duotone”或“sharp”。
style (`String!`)	style 名称，例如“solid”、“regular”、“light”、“thin”或“brands”。
prefix (`String!`)	前缀，例如“fas”（用于 Classic Solid familyStyle）或“fasl”（用于 Sharp Light familyStyle）。前缀是一个唯一标识 familyStyle 的单一术语。

自定义图标（也称为 iconUploads）对于单色图标具有“kit”family，对于双色调图标具有“kit-duotone”family。两者都具有“custom”style。

family 和 style 的组合唯一标识一个 Font Awesome familyStyle。单个前缀也唯一标识一个 familyStyle。因此，可以创建映射，在两个方向进行映射

prefix => {family, style}

{family, style} => prefix

Duotone 是它自己的 family。一个 style 在 Font Awesome 5 中被引入到该 family 中：Duotone Solid。

Brands 是 Classic family 中的一个 style。

以下是对 Duotone (Solid) FamilyStyle 对象的示例

{
family: "duotone",
style: "solid",
prefix: "fad"
}

对 (Classic) Brands 的示例

{
family: "classic",
style: "brands",
prefix: "fab"
}

对 Sharp Solid 的示例

{
family: "sharp",
style: "solid",
prefix: "fass"
}

对 Kit Custom 的示例

{
family: "kit",
style: "custom"
}

对 Kit Duotone Custom 的示例

{
family: "kit-duotone",
style: "custom"
}

FamilyStylesByLicense

指示每个许可证类型，此图标出现在哪些 family 和 style 中。

字段	描述
free (`[FamilyStyle!]!`)	一个包含此图标在 Font Awesome Free 中出现的 family 和 style 列表。Free 图标通常仅出现在“classic”family 和“solid”style 中。一些图标也出现在“classic”family 和“regular”style 中，以便与 Font Awesome 4 更接近地视觉等效。品牌图标出现在“classic”family 和“brands”style 中。对于根本未出现在 Font Awesome Free 中的图标，例如 alicorn，这将是一个空列表。
pro (`[FamilyStyle!]!`)	一个包含此图标在 Font Awesome Pro 中出现的 family 和 style 列表。Pro 图标通常出现在所有可用 family 和 style 中。

字段

描述

free ([FamilyStyle!]!) 一个包含此图标在 Font Awesome Free 中出现的 family 和 style 列表。Free 图标通常仅出现在“classic”family 和“solid”style 中。一些图标也出现在“classic”family 和“regular”style 中，以便与 Font Awesome 4 更接近地视觉等效。品牌图标出现在“classic”family 和“brands”style 中。对于根本未出现在 Font Awesome Free 中的图标，例如 alicorn，这将是一个空列表。

pro ([FamilyStyle!]!) 一个包含此图标在 Font Awesome Pro 中出现的 family 和 style 列表。Pro 图标通常出现在所有可用 family 和 style 中。

ProCdnReferrers

与已认证帐户关联的已白名单列入用于 Pro CDN 使用的域的集合。

字段	描述	Auth
hostnames (`[String]`)	域名列表。	domains_read 必需
limit (`Integer`)	允许为此帐户白名单列入的域数量的限制。	domains_read 必需
active (`Boolean`)	此域白名单是否处于活动状态。	domains_read 必需

版本

关于 Font Awesome 的特定版本的元数据，通过 version 标识。

字段	描述
date (`String!`)	发布日期，采用 ISO8601 格式（YYYY-MM-DD），例如：2020-03-23
isLatest (`Boolean!`)	在执行此查询时，此版本是否为最新的可用的 Font Awesome 版本。预发布版本、Alpha 版本和 Beta 版本不包括在内。
download (Download!)	有关此版本可用的下载格式的元数据。
iconCount (IconCount!)	有关此版本中免费版和专业版图标数量的元数据。
srisByLicense (SrisByLicense!)	为每种许可类型（免费版和专业版）提供此版本中每个 CDN 资源的子资源完整性哈希值。
version (`String!`)	用于标识此版本的 major.minor.patch 版本号。例如：5.13.0
icons (`[Icon!]!`)	此版本中的所有图标。
icon (`Icon`)	此版本中的单个图标，按名称选择。必须是小写字母，并且完全匹配。
familyStyles (`[FamilyStyle!]!`)	此版本中的所有 familyStyles。

对于 icons 字段

参数	类型	描述
`license`	`String`	可以是“free”或“pro”。“free”包含 Font Awesome Free 中可用的图标。“pro”包含仅在 Pro 中可用的图标，例如 alicorn。省略此参数将返回所有图标。

对于 icon 字段

参数	类型	描述
`name`	`String!`	必需。图标的名称，例如“mug-saucer”或“avocado”。可以是图标的 `id`，也可以是任何名称别名。

按名称选择图标

使用 release 对象上的 icon 字段按名称选择特定图标。

对于包括单词关联的模糊搜索，超出图标名称上的简单文本匹配，请使用 search 字段。

您可以使用图标的 id 或其任何名称别名作为 icon 字段的 name 参数的值。它必须完全匹配。

例如，这将使用其 Unicode 选择 mug-saucer 图标

query {
  release(version: "6.x") {
    icon(name: "mug-saucer") {
      id
      unicode
    }
  }
}

可以使用 GraphQL 别名选择多个图标。以下查询将按名称选择一些图标，以及它们的 iconDefinitions，用于所有可用的 familyStyles

query {
  release(version: "6.x") {
    mugSaucer: icon(name: "mug-saucer") {
      id
      svgs {
        iconDefinition
      }
    }
    coffee: icon(name: "coffee") {
      id
      svgs {
        iconDefinition
      }
    }
    cookie: icon(name: "cookie") {
      id
      svgs {
        iconDefinition
      }
    }
  }
}

结果将类似于

{
  "data": {
    "release": {
      "coffee": {
        "id": "mug-saucer",
        "svgs": [...]
      },
      "cookie": {
        "id": "cookie",
        "svgs": [...]
      },
      "mugSaucer": {
        "id": "mug-saucer",
        "svgs": [...]
      }
    }
  }
}

请注意，其中两个具有相同的 id mug-saucer。这是因为为 coffee 对象选择的名称“coffee”是“mug-saucer”的别名：两个名称代表同一个图标。

垫片

用于支持版本 4 语法的垫片。

垫片有助于实现与 Font Awesome 5 或 6 安装上的 Font Awesome 4 图标引用兼容。理想情况下，用户将升级所有图标引用以使用更新的语法。但是 Font Awesome 4 仍然很常见，有时难以升级。垫片可以简化升级路径。

了解有关版本 4 兼容性的更多信息。

垫片可以做什么

Font Awesome 4 中出现的一些图标已被重命名。垫片可以自动将版本 4 图标名称映射到版本 5/6 图标名称。
对于某些版本 4 图标，其视觉外观比实心样式更匹配常规样式。垫片可以自动更改这些图标以使用常规样式。
Font Awesome 5/6 将所有品牌相关图标放在一个单独的品牌样式中；Font Awesome 4 没有。垫片可以将版本 4 品牌图标映射到 Font Awesome 5 品牌样式。

示例

没有垫片的图标

没有垫片的图标示例包括“intersection”和“coffee”。

“intersection”图标首次出现在 Font Awesome 5 中，因此没有垫片。

“coffee”图标出现在 Font Awesome 5/6 之前，但由于其在 Font Awesome 5/6 中的等效形式为实心 (fas) 样式，并且这是 Font Awesome 5/6 中的默认样式，因此不需要垫片。

具有垫片的图标

具有垫片的图标示例包括“bluetooth”、“bath”和“address-book”。

“bluetooth”图标的名称在 Font Awesome 4 和 5/6 中相同，但由于它是品牌图标，并且所有品牌图标都出现在 Font Awesome 5 品牌 (fab) 样式中，因此存在垫片将其映射到该样式。

Font Awesome 5/6 中的“bath”图标等效于在 Font Awesome 4 中称为“bathtub”的图标。垫片从旧名称映射到新名称。

“address-book”图标等效于 Font Awesome 4 中称为“address-book-o”的图标。它在 Font Awesome 5/6 中的名称更改表明命名约定更改。在 Font Awesome 4 中，图标名称中的“o”表示某些图标的“轮廓”样式，而 Font Awesome 5/6 具有常规 (far) 样式，并且所有图标都具有常规样式变体。

由于常规 (far) 样式是 Font Awesome 5/6 中的非默认样式，因此垫片不仅必须将图标的名称从“address-book-o”映射，而且还必须将其样式映射到 Font Awesome 5/6 常规 (far) 样式。

字段	描述
id (`String!`)	图标的版本 4 名称。示例：Font Awesome 5 “bath”图标的垫片具有 `id` “bathtub”，因为该图标在 Font Awesome 4 中被称为“bathtub”。
name (`String`)	图标的版本 5/6 名称。如果此字段为 `null`，则表示版本 4 和版本 5/6 图标名称相同。在这种情况下，垫片的 `prefix` 必须包含重要的区别。
prefix (`String`)	此图标在 Font Awesome 5/6 中的样式前缀。例如，在“address-book”图标上，这将是“far”。如果为 `null`，则表示此图标的版本 5/6 等效项位于默认的实心样式中，其前缀为“fas”。

SRI

Font Awesome CDN 上相对路径上的 CDN 资源的子资源完整性哈希值。

字段	描述
path (`String!`)	Font Awesome CDN 上资源的相对路径。示例：`css/all.css` 是使用 Webfonts with CSS 技术加载所有图标的样式表的相对路径。
value (`String!`)	由 `path` 指示的资源内容的哈希值。

例如，Font Awesome 5.13.0 中 css/all.css 内容的 value 为

sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V

SrisByLicense

Font Awesome 版本的 Sri 集合，按许可证组织：免费版或专业版。

相对路径 css/all.css 在免费版和专业版 CDN 上都有效，但它引用了两个内容不同的资源，因此哈希值也不同。

字段	描述
free (`[Sri!]!`)	此版本中免费版 CDN 上所有资源的 `Sri` 对象集。
pro (`[Sri!]!`)	此版本中专业版 CDN 上所有资源的 `Sri` 对象集。

别名

给定图标的名称和 Unicode 别名。

字段	描述
names (`[String!]!`)	一个名称别名列表。
unicodes (`UnicodeAliases`)	一个可能包含各种类型 Unicode 别名的对象。值是十六进制。

名称别名

名称别名是图标的名称，而不是其 id。

图标有时会重命名。也就是说，它的 id 从一个值更改为另一个值。发生这种情况时，出于兼容性考虑，旧的 id 将成为名称别名。因此，在更新到新版本并继续使用旧名称时，使用旧名称的用户或应用程序将继续通过该名称获取预期的图标。

例如，在 Font Awesome 6.5.1 中具有 id “mug-saucer” 的图标在 Font Awesome 5.15.4 中具有 id “coffee”。当该图标重命名为“mug-saucer”时，名称“coffee”被保留为同一图标的别名。因此，对于大多数用例，这两个名称可以互换使用。例如，在 HTML 元素上使用 CSS 类时，在 Font Awesome 6 中，类 fa-coffee 和 fa-mug-saucer 等效。

Unicode 别名

Unicode 别名是图标或其双色调图层的 Unicode，而不是图标的主要 Unicode。值是十六进制。

字段	描述
composite (`[String!]!`)	每个 Unicode 别名都引用单色图标或“完整”双色调图标。
primary (`[String!]!`)	每个 Unicode 别名都引用双色调图标的主要图层。
secondary (`[String!]!`)	每个 Unicode 别名都引用双色调图标的次要图层。

例如，截至 Font Awesome 6.5.1，名为 credit-card 的图标的主要 Unicode 为 f09d。在 Font Awesome 4.7.0 中，有一个名为 fa-credit-card-alt 的图标类，其 Unicode 为 f283。在 Font Awesome 的最新版本中，没有名为 credit-card-alt 的图标，但为了兼容性，credit-card 图标具有 f283 作为 Unicode 别名。该图标还具有 credit-card-alt 作为名称别名。因此，在从 Font Awesome 4 升级到 Font Awesome 6 时，任何使用 f283 Unicode 或 fa-credit-card-alt 类的类将获得 credit-card 图标。

还有一些 Unicode 别名用于提供与一些标准 Unicode 值的兼容性，例如 ASCII 范围内的值，这些值可能会在计算机键盘上键入。

例如，名为 at 的图标在 Font Awesome 4 和 5 中的 Unicode 值为 f1fa。截至 Font Awesome 6，与 ASCII 范围内的许多字符（例如英语字母、数字、标点符号和某些符号）相关的图标的 Unicode 更改为使用其标准 Unicode 值。@ 字符的标准 Unicode 值为 0x40。因此，在 Font Awesome 6 中，at 图标被赋予了 Unicode 值 (十六进制) 40。但由于它在之前的版本中是 f1fa，因此 f1fa 被保留为 at 图标的 Unicode 别名。

还有一些 Unicode 别名用于提供与表情符号标准 Unicode 值的兼容性。

例如，截至 Font Awesome 6.5.1，名为 face-grin 的图标的 Unicode 为 f580。该图标还具有 1f600 的 Unicode 别名，因为 1f600 是其中一个笑脸表情符号的表情符号标准 Unicode 值。

Unicode 别名有三种类型：composite、primary 和 secondary。Unicode 别名类型的名称与图标层有关。

Composite 类型的别名是引用“完整”图标的 Unicode。这是主要类型的 Unicode 别名。这是唯一与所有图标相关的 Unicode 别名类型。

单色图标只有一个图层。该图层包含“完整”图标。因此，composite 是唯一与单色图标相关的 Unicode 别名类型。

双色调图标可能同时具有主要图层和次要图层（或者可能只具有其中一个）。在 Font Awesome 5 中，当引入双色调样式时，每个图标都有单独的 Unicode 用于引用其主要图层和次要图层。为了渲染“完整”图标，有必要将主要字形叠加在次要字形之上。每个字形都通过其相应的 Unicode 查找。

primary 和 secondary Unicode 别名类型引用以前用于引用双色调图标的不同图层的 Unicode。因此，primary 和 secondary Unicode 别名仅与双色调图标相关。

复合 Unicode 别名与双色图标密切相关，因为在 Font Awesome 的桌面 OTF 双色字体中，双色图标既以完整的 SVG 图形形式编码（在字体的 `SVG 表中），也以每层单独的图形形式编码（在字体的 `CFF 表中）。不同类型的图形用于不同的用例，通常取决于是否需要应用自定义样式。

（大多数支持 SVG 字体的应用程序不允许对 SVG 图形应用自定义样式，但允许对每个标准图形应用自定义样式。更多信息请参阅桌面上的双色图标。）

SVG 双色图形包含整个图标 - 两层以默认样式正确对齐。它们可以使用单个 Unicode 地址：图标的主 Unicode 或任何复合 Unicode 别名。

Font Awesome 6 中引入的双色图标没有为其辅助层分配独立的 Unicode，也没有辅助 Unicode 别名。从 Font Awesome 6 开始，查找 Web 字体和桌面 OTF 字体中双色辅助层通常的方式是使用连字。连字是查找 Font Awesome 6 中引入的图标的双色辅助层的唯一方式。

因此，虽然它可能看起来像所有双色图标都有辅助 Unicode 别名，但请仔细查看！它们仅适用于 Font Awesome 5 中引入的那些双色图标，以确保兼容性。

请参阅这篇博客文章以获取更多详细信息和示例。