我想在@托马斯Kekeisen的答案上添加一个更新的答案，用于FontAwesome的版本5（当前版本是5.13.0）。
另外，我希望尽可能地减少事情的发生，所以：
1.我将只引用woff2和since there's no reason to use another format。
1.我将只参考FontAwesome的regular样式（这是他们的5 styles之一）。
因此，如果您使用的格式不是woff2，或者样式不是regular，只需以相同的方式将以下内容应用于它。
因此，为了在Chrome扩展中使用FontAwesome，请执行以下操作：

1. Download FontAwesome .zip file（这是一个直接下载链接，您可以访问下载页面here）。
   1.解压缩.zip文件，只提取需要的内容，在我们的示例中是：
   (a)css/fontawesome.min.css
   (b)css/regular.min.css
   (c)webfonts/fa-regular-400.woff2

• 注意：如果您使用css/all.min.js，它将同时替换（a）和（b）。*

1.* 可选，会让我们的生活更轻松 *：
在Chrome扩展根文件夹下，创建文件夹css和webfonts以模仿FontAwesome结构，并将上面列出的文件移动到这些文件夹中。
文件夹结构应如下所示：

your-extension
 |- css
   |- fontawesome.min.css
   |- regular.min.css
 |- webfonts
   |- fa-regular-400.woff2

1.在css/regular.min.css内部，使用以下内容覆盖（是的，只需覆盖它）@font-face媒体样式：

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display:block;
  src: url("chrome-extension://__MSG_@@extension_id__/webfonts/fa-regular-400.woff2");
}

• 注意：让我再次提醒一下，我将regular样式作为一个示例引用，因此如果您使用其他样式，请确保@font-face.src属性具有正确的值 *。

1.按如下所示更新您的manifest.json：

{
  ...
  "content_scripts": [{
     ...
     "css": [
        "css/fontawesome.min.css",
        "css/regular.min.css",
     ]
     ...
  }],
  ...
  "web_accessible_resources": [
     ...
    "css/fontawesome.min.css",
    "css/regular.min.css",
    "webfonts/fa-regular-400.woff2", // or: "webfonts/*" 
  ]
}

• 注意：需要将.css路径添加到"content_scripts"和"web_accessible_resources"中 *。

这就是我如何在chrome扩展中获得fontawesome（4.7）的本地（离线）示例的方法：
1)将字体文件（FontAwesome.otf、fontawesome-webfont.eot、fontawesome-webfont.svg、fontawesome-webfont.ttf、fontawesome-webfont.woff、fontawesome-webfont.woff2）下载到fonts/
2)下载font-awesome.min.css到css/并替换此文件chrome-extension://__MSG_@@extension_id__/fonts/[...]中的所有url。
3)像这样更新你的manifest.json：

{
    ...
    "content_scripts":          [
        {
           ...
            "css":        [
                "css/font-awesome.min.css",
                ...
            ]
            ...
        }
    ],
    ...
    "web_accessible_resources": [
        ...
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2",
    ]
}

这使得fontawesome可以离线使用（你不需要任何fontawesome-js）。

以上这些对我都不起作用。可能是因为所有的答案都过时了，因为它们引用了旧版本的Font Awesome。我找到what Font Awesome 6 suggests on their official website后解决了这个问题。

简而言之：

• Download the Font Awesome zip File for the web
• 提取项目文件夹中的所有内容
• 复制路径以获取css/all.css，css是您刚刚解压缩的文件夹中的文件夹
• 将以下内容粘贴到HTML的头部：

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

注意：确保插入正确的路径。

获取文件路径的一些很棒的教程：

• Get the full path of a file on Windows
• 获取Linux上文件的完整路径
• Get the full path on of a file macOS

最简单但也很糟糕的方法是下载Fontawesome并直接包含它

curl -o fontawesome.js "https://use.fontawesome.com/840a321d95.js"

然后添加到需要的地方

<script src="fontawesome.js"></script>

如果您需要使用Font Awesome作为Chrome扩展的内容脚本（而不是popup.html），您可以执行以下操作：
下载https://use.fontawesome.com/840a321d95.js，将其重命名为fontawesome.js，并将其包含在扩展的目录中，如@wesdotcool的答案所述。
然后将以下内容添加到manifest.json：

{
    "manifest_version": 2,
    "content_scripts": [
        {
            "js": ["fontawesome.js"]
        }
    ],
}

我成功地能够使用字体真棒使用Sass在我的chrome扩展。
使用sass将FontAwesome 5.11.x集成到chrome扩展中的步骤：
1.转到Font Awesome Download page以下载特定于Web的文件的本地副本。
1.将SCSS文件夹复制到样式文件夹中。
1.将整个webfonts文件夹复制到assets文件夹中。
1.打开字体awesome scss/variables.scss，编辑$fa-font-path变量，使其指向放置webfonts文件夹的位置。
您需要使用chrome-extension://__MSG_@@extension_id__/查找扩展文件夹的路径。
对于我来说，字体文件的路径是-extension/chrome/assets/font-awesome，所以我将$fa-font-path更改为chrome-extension://__MSG_@@extension_id__/assets/font-awesome。
1.在主SCSS文件中添加@import "scss/fontawesome.scss"，导入字体。另外，在主SCSS文件中导入一个或多个样式@import "scss/solid.scss"。如果您使用常规字体，则导入regular.scss。
执行您的网页扩展，你应该能够使用字体真棒图标。