跳到内容
Font Awesome 文档
欢迎 Web Awesome，最大的开源 Web 组件库。
今天预订！

SVG 精灵

希望将 Font Awesome 图标用作 SVG 精灵？我们有！而且不需要在运行时加载 JavaScript 代码。

我们将介绍将图标添加为 SVG 精灵的基本知识，并涵盖使用 SVG 精灵的难点，以帮助您确保您的项目适合使用它们。

选择精灵文件

在 Font Awesome 下载 或 包 中，您将找到所需的`文件。在 Font Awesome Pro 中，有三个图标系列：Classic、Sharp 和 Brands。有 五种样式 的 Classic 图标，更多 Sharp 样式即将推出。 免费版 包括 Solid 和 Regular 中的选择图标，以及所有品牌图标。

经典系列

样式可用性精灵文件看起来像
Solid免费或 Prosolid.svg
Regular免费或 Proregular.svg
浅色仅限 Prolight.svg
Thin仅限 Prothin.svg
Duotone仅限 Produotone.svg

锐利系列

样式可用性精灵文件看起来像
Solid仅限 Prosharp-solid.svg
Regular仅限 Prosharp-regular.svg
浅色仅限 Prosharp-light.svg
Thin仅限 Prosharp-thin.svg
Duotone即将推出！

品牌系列

样式可用性精灵文件看起来像
品牌免费brands.svg

添加图标

要从精灵文件中添加图标，请按照以下步骤操作

  1. 获取您要使用的样式的精灵文件。
  2. 将此文件与您的其他静态文件（如 CSS 或图像）一起放置在您的项目中。
  3. 在您文档的 body 中，使用您要使用的样式在精灵文件中按名称调用各个图标。确保路径正确指向您放置精灵文件的位置，并且它们 托管在同一服务器上！

以下是一些如何在各种样式中调用图标的示例

<header>
  <ul>
    <li>
      <!-- referencing a solid style icon -->
      <svg>
        <use xlink:href="/your-path-to-fontawesome/sprites/solid.svg#saxophone-fire"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a thin style icon -->
      <svg>
        <use xlink:href="/your-path-to-fontawesome/sprites/thin.svg#trumpet"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a sharp family's solid style icon  -->
      <svg>
        <use xlink:href="/your-path-to-fontawesome/sprites/sharp-solid.svg#piano-keyboard"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a sharp family's regular style icon  -->
      <svg>
        <use xlink:href="/your-path-to-fontawesome/sprites/sharp-regular.svg#cowbell-circle-plus"></use>
      </svg>
    </li>
    <li>
      <a href="https://facebook.com/fontawesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use xlink:href="/your-path-to-fontawesome/sprites/fa-brands.svg#facebook"></use>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://twitter.com/fontawesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use xlink:href="/your-path-to-fontawesome/sprites/fa-brands.svg#twitter"></use>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://github.com/FortAwesome/Font-Awesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use xlink:href="/your-path-to-fontawesome/sprites/fa-brands.svg#github"></use>
        </svg>
      </a>
    </li>
  </ul>
</header>

SVG 精灵问题

SVG 精灵有一些棘手的地方，您需要了解。请牢记以下内容，确保您的项目适合使用这种技术。