跳过到内容
Font Awesome 文档
欢迎使用 Web Awesome，这是最大的、最好的开源 web 组件库。
现在预订！

方法

以下是 Font Awesome Javascript API 中提供的方法。

counter(content, params)

将计数器添加到图层。

import { faEnvelopeSquare } from '@fortawesome/free-solid-svg-icons'
import { layer, icon, counter } from '@fortawesome/fontawesome-svg-core'
layer((push) => {
  push(icon(faEnvelopeSquare))
  push(counter('5'))
}).html

参数

允许以下键 (请参阅 icon())

名称
标题
类
属性
样式

dom.css()

在 DOM 中正确显示 API 生成的图标所需的样式表定义。

生成正确显示图标所需的配套 CSS。如果您选择在 配置 中禁用 autoAddCss，则需要获取这些样式并将其手动插入 DOM。

这很有用，通常与 dom.insertCss() 配合使用。

dom.i2svg(params)

将自动查找页面中的所有 <i> 标签，并将其替换为 <svg> 元素。

此功能使用 requestAnimationFrame 来批处理更新并提高性能。

import { dom, library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'


library.add(fas)


dom.i2svg()

要指定要搜索的不同元素

dom.i2svg({ node: document.getElementById('content') })

从 5.7.0 版开始，此方法还支持 Promise API

dom.i2svg() .then(function () {console.log('Icons have rendered')})

您也可以使用回调，这些回调将在图标渲染后触发

function iconDoneRendering() {
  console.log('Icons have rendered')
}


dom.i2svg({ callback: iconsDoneRendering })

dom.insertCss()

将给定 CSS 添加到 DOM <head> 的便利方法。

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


const css = dom.css()


dom.insertCss(css)

dom.watch(params)

为您调用 dom.i2svg()，并监视 DOM 中添加或修改的任何其他图标。

当您加载 @fortawesome/fontawesome-svg-core，但仍希望利用自动 DOM 监视时，此方法很有用。

参数

在没有参数的情况下调用 dom.watch() 等效于使用以下参数调用

dom.watch({
  autoReplaceSvgRoot: document,
  observeMutationsRoot: document
})
名称目的
autoReplaceSvgRoot限制自动搜索和替换图标的范围。
observeMutationsRoot将突变观察者的范围限制为此根节点下的 DOM。

findIconDefinition(params)

查找先前在库中注册的图标定义。

基本使用

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


const faUser = findIconDefinition({ iconName: 'user' })
{
  "prefix": "fas",
  "iconName": "user",
  "icon": [
    512,
    512,
    [],
    "f007",
    "M962…-112z"
  ]
}

也指定前缀

findIconDefinition({ prefix: 'fab', iconName: 'fort-awesome' })
{
  "prefix": "fab",
  "iconName": "fort-awesome",
  "icon": [
    448,
    512,
    [],
    "f286",
    "M412…999z"
  ]
}

然后，您可以将其作为 iconDefinition 传递给其他函数，例如 icon()。

有关更多信息，请访问 [样式] 和 [别名]，以了解如何在 findIconDefinition() 中使用它们。

icon(iconDefinition, params)

将图标渲染为 SVG。

基本使用

import { icon } from '@fortawesome/fontawesome-svg-core'
import { faPlus } from '@fortawesome/free-solid-svg-icons'


const faPlusIcon = icon(faPlus)

高级选项

获取图标的 HTML

icon(faPlus).html
[
  '<svg data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-16">...</svg>'
]

从 HTMLCollection 追加节点

const faPlusIcon = icon(faPlus)


// Get the first element out of the HTMLCollection
document.appendChild(faPlusIcon.node[0])

抽象树

icon(faPlus).abstract
[
  {
    tag: 'svg',
    attributes: {
      'data-prefix': 'fas',
      'data-icon': 'user',
      class: 'svg-inline--fa fa-user fa-w-16',
      role: 'img',
      xmlns: 'http://www.w3.org/2000/svg',
      viewBox: '0 0 512 512'
    },
    children: [
      {
        tag: 'path',
        attributes: {
          fill: 'currentColor',
          d: 'M96…112z'
        }
      }
    ]
  }
]


// The `data-prefix` attribute will only accept short prefix names (ex. fas, far, fal, fat, fad, fass)

使用转换

icon(faPlus, {
  transform: {
    size: 8, // starts at 16 so make it half
    x: -4, // the same as left-4
    y: 6, // the same as up-6
    rotate: 90, // the same as rotate-90
    flipX: true, // the same as flip-h
    flipY: true // the same as flip-v
  }
}).html

使用主图标作为另一个图标的遮罩

import { icon } from '@fortawesome/fontawesome-svg-core'
import { faPlus, faCircle } from '@fortawesome/free-solid-svg-icons'


icon(faPlus, {
  mask: faCircle
}).html

指定用于生成 SVG 定义的遮罩 ID (在 5.12.2 中添加)

这对测试使用快照来验证测试结果的库很有用。

import { icon } from '@fortawesome/fontawesome-svg-core'
import { faPlus, faCircle } from '@fortawesome/free-solid-svg-icons'


icon(faPlus, {
  mask: faCircle,
  maskId: 'circle'
}).html

添加标题属性

icon(faBars, {
  title: 'Navigation menu'
}).html
<svg
  aria-labelledby="svg-inline--fa-title-abuUI77dy8"
  data-prefix="fas"
  data-icon="bars"
  class="svg-inline--fa fa-bars fa-w-14"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512"
>
  ' + '<title id="svg-inline--fa-title-abuUI77dy8">Navigation menu</title>' + '
  <path></path>' +'
</svg>

添加标题时显式标题 ID (在 5.12.2 中添加)

这对测试使用快照来验证测试结果的库很有用。

icon(faBars, {
  title: 'Navigation menu',
  titleId: 'navigation-menu'
}).html
<svg
  aria-labelledby="svg-inline--fa-title-navigation-menu"
  data-prefix="fas"
  data-icon="bars"
  class="svg-inline--fa fa-bars fa-w-14"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512"
>
  ' + '<title id="svg-inline--fa-title-navigation-menu">Navigation menu</title>'
  + '<path></path>' + '
</svg>

其他类

icon(faSpinner, {
  classes: ['fa-spin']
}).html
<svg
  data-prefix="fas"
  data-icon="spinner"
  class="svg-inline--fa fa-spinner fa-w-16 fa-spin"
>
  …
</svg>

其他属性

icon(faSpinner, {
  attributes: { 'data-component-id': 987654 }
}).html

其他样式

icon(faSpinner, {
  styles: { 'background-color': 'coral' }
}).html

创建符号 (自动生成 ID)

icon(faSpinner, {
  symbol: true
}).html

创建符号 (显式 ID)

icon(faSpinner, {
  symbol: 'spinner-icon'
}).html

layer(assembler, params)

允许将多个图标组合在一起放到一个图层中。

用于生成 图层 HTML 标记 的便利函数。它将 icon()、text() 或 counter() 输入包装在 <span class="fa-layers fa-fw"></span> 中。

import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { layer, icon } from '@fortawesome/fontawesome-svg-core'


layer((push) => {
  push(icon(faSpinner))
  push(icon(faUser, { transform: { size: 4 } }))
}).html

像这样指定其他类。

import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { layer, icon } from '@fortawesome/fontawesome-svg-core'


layer(
  (push) => {
    push(icon(faSpinner))
    push(icon(faUser, { transform: { size: 4 } }))
  },
  { classes: ['sign-in-loading'] }
).html

参数

允许以下键

名称
类

library.add(…iconDefinitions)

预先注册图标定义，这样就不必显式传递它们来渲染图标。

显式传递图标

import { icon } from '@fortawesome/fontawesome-svg-core'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'


icon(faUser)
icon(fab.faFortAwesome)

使用库

import { icon, library } from '@fortawesome/fontawesome-svg-core'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'


library.add(fab, faUser)


icon({ prefix: 'fas', iconName: 'user' })
icon({ prefix: 'fab', iconName: 'fort-awesome' })

parse.icon(icon)

接受一个图标字符串、一个对象或一个数组，并返回一个图标定义。

它是什么？

当调用图标时，parse.icon() 方法允许用户输入图标的名称 (或别名) 作为字符串、对象或数组。请参阅我们的 Vue 文档 以获取示例。

此外，parse.icon() 方法还会规范化我们的样式和图标名称。例如，您可以使用 'solid'、'fa-solid'、'fas' 或 'fa' 的前缀来引用我们的实心图标。

此外，您可以仅使用图标名称引用我们的图标，这将默认使用实心样式。

如何使用

将图标引用为字符串

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


// the icon's style will default to Solid, it's family will default to Classic
parse.icon('dog')


// returns an object, with the default `fas` prefix
// {prefix: 'fas', iconName: 'dog'}

使用简短前缀名称将图标引用为对象

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


// No additional parsing was needed for this since it started with the prefix and icon name
parse.icon({ prefix: 'fas', iconName: 'dog' }) // {prefix: 'fas', iconName: 'dog'}


// Same deal, no additional parsing is required for the Sharp family either
parse.icon({ prefix: 'fass', iconName: 'cat' }) // {prefix: 'fass', iconName: 'cat'}

使用长前缀名称将图标引用为对象

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


// a classic solid dog icon
parse.icon({ prefix: 'fa-solid', iconName: 'dog' }) // { prefix: 'fas', iconName: 'dog' }

使用没有前缀的数组将图标引用为数组

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


// This only lets you select the Classic family:
parse.icon(['solid', 'dog'])

前缀和样式类

与我们的图标数量一样，我们的样式也增加了！我们现在有六种样式的图标，尽管有些 仅对我们的 Pro 订阅者可用。下表列出了我们所有的样式以及如何在 Font Awesome 图标中使用它们

样式样式类
品牌"fab", "fa-brands"
实心"fa", "fas", "fa-solid"
常规"far", "fa-regular"
浅色"fal", "fa-light"
细线"fat", "fa-thin"
双色调"fad", "fa-duotone"
锐利实心"fass", "fa-sharp fa-solid"

阅读有关我们的 基本样式 或 别名 如何与样式一起使用。

parse.transform(transformString)

接受一个强大的转换字符串，并生成 API 使用的规范化转换对象。

强大的转换是由空格分隔的 *动词* 和 *值*。

转换动词

动词它做什么
grow使图标更大
shrink使图标更小
left将图标向左移动
right将图标向右移动
up将图标向上移动
down将图标向下移动
rotate向左或向右旋转图标
flip-v沿着垂直轴翻转
flip-h沿着水平轴翻转

转换值

Font Awesome 5 图标基于一个 16 像素网格。对于 **大小和移动**，值表示 16 个单位中的 1 个单位。

例如，up-2 表示“将图标向上移动 2 个单位”。如果图标的高度恰好为 16 像素，这将导致图标向上移动 2 像素。

转换为 SVG 转换值

Power Transform 字符串易于使用和组合，但必须转换为对执行 SVG 变换有用的格式。

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


parse.transform('grow-2 left-4 rotate-15')

以下数据是渲染图标时使用的。

{
  "size": 18,
  "x": -4,
  "y": 0,
  "flipX": false,
  "flipY": false,
  "rotate": 15
}

text(content, params)

在图层中添加文本。

import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { layer, icon, text } from '@fortawesome/fontawesome-svg-core'


layer((push) => {
  push(icon(faSpinner))
  push(text('Wait…', { transform: { size: 4 } }))
}).html

参数

允许以下键 (请参阅 icon())

名称
变换
标题
类
属性
样式

toHtml(abstractElement)

便利方法，用于将 Font Awesome 对象的抽象表示转换为其相应的 HTML 标记。

icon()、text()、layer() 和 counter() 函数都返回一个具有属性 abstract 和 html 的 Font Awesome 对象。（另请参见 icon() 文档，了解更多有关此类对象形状的信息。）

toHtml() 可用于将任何抽象元素转换为 HTML。