跳至内容
Font Awesome 文档
欢迎使用 Web Awesome，最大、最好的开源 Web 组件库。
今天预购！

Python/Django

Font Awesome 现在拥有一个官方的 Django 插件，可通过 Python 包安装程序 pip 获取，它提供了一种无缝的方式，让您在 Django 项目中使用我们的图标。

已安装的内容

让我们介绍一下您在 Font Awesome Free 和 Pro 中都需要的目录和文件的基本知识。安装后，免费和专业版的 Web 导向型 Font Awesome 包将包含以下目录和文件

路径它是什么您应该从哪里开始
/cssWeb 字体的样式表all.css
/js带有 JavaScript 的 SVGall.js
/lessLess 预处理器fontawesome.less
/scssSass 预处理器fontawesome.scss
/spritesSVG 精灵solid.svg
/svgs每个图标的单独 SVG单独的 *.svg 图标
/webfonts与 CSS 一起使用的 Web 字体文件请参阅 /css

使用 Font Awesome Free 与 Django

添加 Font Awesome Free 需求和应用

首先，通过将以下内容放在项目的 requirements.txt 文件 中并将 version_number 替换为要使用的 Font Awesome 版本，将 Font Awesome Free 添加到项目的依赖项中。

终端窗口
fontawesomefree==version_number

接下来，通过将 'fontawesomefree' 添加到 Django settings.py 文件中的 INSTALLED_APPS 中，将 Font Awesome Free 添加到 Django 安装中。

  INSTALLED_APPS = [
    'fontawesomefree'
  ]

将核心 fontawesome.css 文件以及您要使用的任何样式的 CSS 文件链接到打算添加图标的每个模板或页面的 <head> 中。

以下是以 Web 字体使用 Solid 和 Brands 样式的示例

<head>
  <!-- Our project just needs Font Awesome Free's Solid and Brand files -->
  <!--
      Link tags cause URI malformed error
    <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css"> -->
</head>
<body>
  <i class="fa-solid fa-user-chef"></i>
  <!-- uses solid style -->
  <i class="fa-brands fa-github-square"></i>
  <!-- uses brand style -->
</body>

将核心 fontawesome.css 文件以及您要使用的任何样式的 CSS 文件链接到打算添加图标的每个模板或页面的 <head> 中。

以下是以 Web 字体使用 Solid 和 Brands 样式的示例

<head>
  <!-- Our project just needs Font Awesome Free's Solid and Brand files -->
  <!--
      Link tags cause URI malformed error
      <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
      <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
      <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
    -->
</head>
<body>
  <i class="fa-solid fa-user-chef"></i>
  <!-- uses solid style -->
  <i class="fa-brands fa-github-square"></i>
  <!-- uses brand style -->
</body>

或者，如果您想使用 SVG，以下是以 SVG+JS 使用 Solid 和 Brands 样式的示例

<head>
  <!-- Our project just needs Font Awesome Free's Solid and Brand files -->
  <!--
      Script tags cause URI malformed error
    <script src="{% static 'fontawesomefree/js/fontawesome.js' %}"></script>
    <script src="{% static 'fontawesomefree/js/solid.js' %}"></script>
    <script src="{% static 'fontawesomefree/js/brands.js' %}"></script>
    -->
</head>
<body>
  <i class="fa-solid fa-user-chef"></i>
  <!-- uses solid style -->
  <i class="fa-brands fa-github-square"></i>
  <!-- uses brand style -->
</body>

备用安装：使用 all.css 或 all.js

我们还提供了一个快捷方式 all.min.js 或 all.min.css 文件，其中包含所有免费图标，以及核心实用函数和样式。这是一个方便的快捷方式，但它的性能不如选择单独的样式。

以下是如何使用 SVG+JS 使用该文件的方法

<head>
  <!-- One file includes all the Font Awesome Free icons and utilities -->
  <!-- <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script> -->
</head>
...

或者，如果您更喜欢使用我们的 Web 字体 + CSS 技术，请添加以下 <link> 元素

<head>
  <!-- One file includes all the Font Awesome Free icons and utilities -->
  <!-- <link href="{% static 'fontawesomefree/css/all.min.css' %}" rel="stylesheet" type="text/css"> -->
</head>
...

使用 Font Awesome Pro 与 Django

访问包含更多图标和样式的 Pro 包，要求您同时拥有 Pro 计划 的有效订阅和有效的 Pro 包令牌。没有 Pro 计划？立即获取，Python 开始…

添加 Font Awesome Pro 需求和应用

首先，通过将以下内容放在项目的 requirements.txt 文件 中并将 version_number 替换为要使用的 Font Awesome 版本，将 Font Awesome Pro 添加到项目的依赖项中。

终端窗口
--extra-index-url https://dl.fontawesome.com/TOKEN/fontawesome-pro/python/simple/
fontawesomepro==version_number

接下来，通过将 'fontawesomepro' 添加到 Django settings.py 文件中的 INSTALLED_APPS 中，将 Font Awesome Pro 添加到 Django 安装中。

  INSTALLED_APPS = [
    'fontawesomepro'
  ]

将核心 fontawesome.css 文件以及您要使用的任何样式的 CSS 文件链接到打算添加图标的每个模板或页面的 <head> 中。

<head>
  <!-- Our project needs Font Awesome Pro's Classic Solid, Sharp Solid, Sharp Regular, and Brand files -->
  <!-- LINK tag problems
    <link href="{% static 'fontawesomepro/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomepro/css/solid.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomepro/css/sharp-solid.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomepro/css/sharp-regular.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomepro/css/brands.css' %}" rel="stylesheet" type="text/css">
    -->
</head>
<body>
  <i class="fa-solid fa-user-chef"></i>
  <!-- uses solid style -->
  <i class="fa-sharp fa-solid fa-alien"></i>
  <!-- uses sharp family's solid style -->
  <i class="fa-sharp fa-regular fa-plate-utensils"></i>
  <!-- uses sharp family's solid style -->
  <i class="fa-brands fa-github-square"></i>
  <!-- uses brand style -->
</body>

或者，如果您想使用 SVG，以下是以 SVG+JS 使用 Solid 和 Brands 样式的示例

<head>
  <!-- Our project needs Font Awesome Pro's Classic Solid, Sharp Solid, Sharp Regular, and Brand files -->
  <!-- LINK tag problems
    <script src="{% static 'fontawesomepro/js/fontawesome.js' %}"></script>
    <script src="{% static 'fontawesomepro/js/solid.js' %}"></script>
    <script src="{% static 'fontawesomepro/js/sharp-solid.js' %}"></script>
    <script src="{% static 'fontawesomepro/js/sharp-regular.js' %}"></script>
    <script src="{% static 'fontawesomepro/js/brands.js' %}"></script>
    -->
</head>
<body>
  <i class="fa-solid fa-user-chef"></i>
  <!-- uses solid style -->
  <i class="fa-brands fa-github-square"></i>
  <!-- uses brand style -->
  <i class="fa-sharp fa-regular fa-plate-utensils"></i>
  <!-- uses sharp family's solid style -->
  <i class="fa-brands fa-github-square"></i>
  <!-- uses brand style -->
</body>

备用安装：使用 all.css 或 all.js

我们还提供了一个快捷方式 all.min.js 或 all.min.css 文件，其中包含 Font Awesome 中的所有图标，以及核心实用函数和样式。如果您要使用所有图标样式或在开发项目时测试不同的样式，这是一个方便的文件。但是，如果您只使用几种样式，我们不建议将其用于生产环境，因为加载所有图标和文件不利于性能。

以下是如何使用 SVG+JS 使用该文件的方法

<head>
  <!-- One file includes all the Font Awesome Pro icons and utilities -->
  <!-- <script src="{% static 'fontawesomepro/js/all.min.js' %}"></script> -->
</head>
...

或者，如果您更喜欢使用我们的 Web 字体 + CSS 技术，请添加以下 <link> 元素

<head>
  <!-- One file includes all the Font Awesome Pro icons and utilities -->
  <!-- <link href="{% static 'fontawesomepro/css/all.min.css' %}" rel="stylesheet" type="text/css"> -->
</head>
...

后续步骤

准备就绪，准备起飞？安装完毕后，查看我们所有的图标，并了解如何在 HTML 中引用它们。