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.

Advertisement

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
Advertisement

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

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'
  ]

Then, reference the installed files in the <head> section of your base template if you want to use Font Awesome in your entire project or in the <head> section of any individual files where you want to use Font Awesome.

  <head>
    <!-- reference your installed Font Awesome Free package's files here -->
    <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
  </head>
  ...

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

  <head>
    <!-- reference your installed Font Awesome Free package's files here -->
    <link href="{% static 'fontawesomefree/css/all.min.css' %}" rel="stylesheet" type="text/css">
  </head>
  ...

Want just certain styles of icons? -- If you would like only to use specific styles rather than the default all option we've included in our Web Fonts and SVG technology, reference the specific style files you want to use like fa-brands or fa-regular and then the loader fontawesome file in place of all.

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

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

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'
  ]

Then, reference the installed files in the <head> section of your base template if you want to use Font Awesome in your entire project or in the <head> section of any individual files where you want to use Font Awesome.

  <head>
    <!-- reference your installed Font Awesome Pro package's files here -->
    <script src="{% static 'fontawesomepro/js/all.min.js' %}"></script>
  </head>

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

  <head>
    <!-- reference your installed Font Awesome Pro package's files here -->
    <link href="{% static 'fontawesomepro/css/all.min.css' %}" rel="stylesheet" type="text/css">
  </head>

Want just certain styles of icons? -- If you would like only to use specific styles rather than the default all option we've included in our Web Fonts and SVG technology, reference the specific style files you want to use like fa-brands or fa-regular and then the loader fontawesome file in place of all.

  <head>
    <!-- Our project just needs Font Awesome Pro's Solid + Brand files -->
    <link href="{% static 'fontawesomepro/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomepro/css/brands.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomepro/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>
Advertisement

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.