欢迎来到 Web Awesome，最大最好的开源 Web 组件库。

上传您自己的图标

现在借助工具包的神奇功能，您可以上传自己的图标，并将它们与官方 Font Awesome 图标一起使用！

我们将介绍上传和使用您自己的图标与 Font Awesome 的基础知识。

1. 设计您的图标

您是图标设计新手，还是希望更熟悉我们的图标网格、形状和设计您自己的图标的方法？我们整理了图标设计指南，帮助您的图标在 Font Awesome 图标旁边看起来和感觉都很好。

查看图标设计指南

2. 准备好上传您的图标

我们整理了关于准备上传图标的详细指南（以及更多！).

查看图标准备推荐

3. 将您的图标上传到工具包

前往您选择的 Pro 工具包开始操作。在那里，您可以在工具包的“已上传图标”部分上传 SVG 文件。我们接受通过拖放、文件浏览甚至直接粘贴 SVG 的方式上传 SVG - 适用于那些想要直接从 Adobe Illustrator 复制或编辑原始 SVG 代码的人。

在将图标上传到工具包时，我们会尽力在自动处理它们时应用我们的最佳实践。但是，我们无法捕获和解决所有可能出错的方式，因此请务必遵循准备图标的技巧。

请记住以下关于上传图标的事项

上传的图标绑定到 特定工具包，并且仅在引用该工具包的项目中有效
上传的图标 目前仅可用于 Web 使用。
您可以上传您的计划允许的任意数量的图标（在一个或多个工具包中）。
上传的图标可以与官方 Font Awesome 图标具有相同的名称（唯一的词缀将它们区分开来）

将图标上传到工具包

遇到问题？

如果您遇到问题，请查看我们的图标上传故障排除，了解一些常见的障碍或值得了解的提示。

图标上传故障排除

在项目中使用上传的图标

将您自己的图标上传并发布到工具包后，它们将立即在使用该工具包的任何项目中可以使用！

样式	可用性	词缀	示例
实心	免费	`fa-solid`	`<i class="fa-solid fa-basketball-hoop"></i>`
常规	仅限 Pro	`fa-regular`	`<i class="fa-regular fa-basketball-hoop"></i>`
浅色	仅限 Pro	`fa-light`	`<i class="fa-light fa-basketball-hoop"></i>`
纤细	仅限 Pro	`fa-thin`	`<i class="fa-thin fa-basketball-hoop"></i>`
双色调	仅限 Pro	`fa-duotone`	`<i class="fa-duotone fa-basketball-hoop"></i>`
锐利实心	仅限 Pro	`fa-sharp fa-solid`	`<i class="fa-sharp fa-solid fa-basketball-hoop"></i>`
锐利常规	仅限 Pro	`fa-sharp fa-regular`	`<i class="fa-sharp fa-regular fa-basketball-hoop"></i>`
锐利浅色	仅限 Pro	`fa-sharp fa-light`	`<i class="fa-sharp fa-light fa-basketball-hoop"></i>`
品牌	免费	`fa-brands`	`<i class="fa-brands fa-dribbble"></i>`
工具包自定义图标	仅限 Pro 服务	`fa-kit`	`<i class="fa-kit fa-basketball-hoop-broken"></i>`
工具包自定义双色调图标	仅限 Pro 服务	`fa-kit-duotone`	`<i class="fa-kit-duotone fa-basketball-hoop-broken"></i>`

以下是一个 HTML 文件的示例，该文件引用了工具包中的官方图标和上传的图标…

<!DOCTYPE html>
<html>
  <head>
    <!-- Place your Kit's code here -->
    <script src="[YOUR_KIT_CODE]" crossorigin="anonymous"></script>
  </head>

  <body>
    <!-- official solid icons -->
    <i class="fa-solid fa-pennant"></i>
    <i class="fa-solid fa-basketball-hoop"></i>
    <i class="fa-solid fa-basketball-ball"></i>

    <!-- official brand icon -->
    <i class="fa-brands fa-dribbble"></i>

    <!-- uploaded icons: reference icons you've uploaded to your Kit -->
    <i class="fa-kit fa-pennant"></i>
    <i class="fa-kit fa-basketball-hoop-broken"></i>
    <i class="fa-kit fa-shaq-dunking"></i>
    <i class="fa-kit-duotone fa-shaq-rapping"></i>
  </body>
</html>

上传的图标可以使用所有官方 Font Awesome 样式选项，包括调整大小、着色、旋转、强大转换、蒙版和分层。您还可以将上传的图标用作伪元素。

下载包含自定义图标的工具包

您可能感觉自己陷入了时间扭曲（但可能没有那么多的时空穿梭机），但您知道您可以下载包含您上传的图标的工具包吗？没错！现在有了版本 6.4，您可以下载工具包，如果它包含上传的图标，那么这些图标将包含在我们为 Font Awesome 制作的所有格式中。

您可以下载您的工具包，以便在 Web 上自行托管为 Web 字体或 SVGs，或者在您的桌面应用程序中使用。只需确保工具包设置中的版本设置为“最新 6.x”，或者如果您选择了特定版本，则它需要至少是 6.4。然后，在工具包的设置选项卡中，您将看到下载选项。