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

We’ll cover the basics of the directories and files you’ll need for both Font Awesome Free and Pro.

What's installed

Once installed, the web-focused Font Awesome package contains 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.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!