Web

Python/Django

Font Awesome now has an official Django plugin that's available via the Python package installer, pip, for a friction-less way to use our icons in your Django projects.

Version 6 has different and separate packages!

We found an issue with the way we named our Version 5 python packages. This has been fixed in Version 6, but it meant creating new Free and Pro packages with a different name scheme - fontawesomefree and fontawesomepro.

What's installed

Let's cover the basics of the directories and files you’ll need for both Font Awesome Free and Pro. Once installed, both the Free and Pro web-focused Font Awesome packages contain the following directories and files:

Path What It Is Where You Should Start
/css Stylesheets for Web Fonts all.css
/js SVG with JavaScript all.js
/less Less pre-processor fontawesome.less
/scss Sass pre-processor fontawesome.scss
/sprites SVG sprites solid.svg
/svgs Individual SVG for each icon individual *.svg icons
/webfonts Web Font files used with CSS See /css

Ch-Ch-Check Yourself Before You Reqs Yourself!

We recommend using requirements files (opens new window) in your Python projects to install the Font Awesome package. The docs below assume that you're working this way.

Using Font Awesome Free with Django

Add the Font Awesome Free Requirement and App

Start by adding Font Awesome Free to your project's requirements by placing this in your project's requirements.txt file (opens new window) and replace version_number with the version of Font Awesome you are using.

fontawesomefree==version_number

Next, add Font Awesome Free to your Django installation by adding 'fontawesomefree' to the INSTALLED_APPS (opens new window) in your Django settings.py file.

  INSTALLED_APPS = [
    'fontawesomefree'
  ]

Link the core fontawesome.css file along with the CSS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to.

Here's an example with the Solid and Brands styles using Web Fonts:

  <head>
    <!-- Our project just needs Font Awesome Free's Solid and Brand files -->
    <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>

Or if you want to use SVGs, here's that same example with the Solid and Brands styles using SVG+JS:

  <head>
    <!-- Our project just needs Font Awesome Free's Solid and Brand files -->
    <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>

Alternate Install: Using all.css or all.js

We have also provided a shortcut all.min.js or all.min.css file that includes all the Free icons as well as the core utility functions and styles. It's a handy shortcut but isn't as performant as selecting individual styles.

Here's how you would use that with SVG+JS:

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

Or if you'd prefer to use our Web Font + CSS technology, add a <link> element like below:

  <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>
  ...

Using Font Awesome Pro with Django

Access to the Pro package, which contains more icons and styles, requires you to have both an active subscription to a Pro Plan and a valid Pro Package Token. Don't have a Pro plan? Get one today and Python on...

Keep It Secret, Keep It Safe!

Grab your super-secret npm token from your account and don't share it with anyone who shouldn't have it. We'll wait here...

Add the Font Awesome Pro Requirement and App

Start by adding Font Awesome Pro to your project's requirements by placing this in your project's requirements.txt file (opens new window) and replace version_number with the version of Font Awesome you are using.

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

Next, add Font Awesome Pro to your Django installation by adding 'fontawesomepro' to the INSTALLED_APPS (opens new window) in your Django settings.py file.

  INSTALLED_APPS = [
    'fontawesomepro'
  ]

Link the core fontawesome.css file along with the CSS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to.

  <head>
    <!-- Our project needs Font Awesome Pro's Classic Solid, Sharp Solid, and Brand files -->
    <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/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-brands fa-github-square"></i> <!-- uses brand style -->
  </body>

Or if you want to use SVGs, here's that same example with the Solid and Brands styles using SVG+JS:

  <head>
    <!-- Our project needs Font Awesome Pro's Classic Solid, Sharp Solid, and Brand files -->
    <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/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>

Font Awesome Sharp requires v6.2.0!

Make sure you have an active Pro-level plan or a Pro license with access to Font Awesome v6.2.0 or greater in order to use our Sharp Solid icons.

Alternate Install: Using all.css or all.js

We have also provided a shortcut all.min.js or all.min.css file that includes ALL of the icons in Font Awesome as well as the core utility functions and styles. It's a handy file if you'll be using all the icon styles or testing out different styles as you develop your project. But if you're using just a couple of styles, we don't recommend it for production sites since loading all of the icons and files isn't great for performance.

Here's how you would use that with SVG+JS:

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

Or if you'd prefer to use our Web Font + CSS technology, add a <link> element like below:

  <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>
  ...

Next Steps

Pre-launch prep all complete and ready to blast off? After you get things installed, check out all of our icons and learn how to reference them in HTML.